有没有办法在React中的按钮中的两个图标状态之间淡出

Question

所以我有一个汉堡导航栏图标，当点击时，图标从汉堡变成了减号。状态逻辑只是像这样放置在NavToggle组件(按钮(中的setState函数。

<NavToggle onClick={() => setToggle(!toggle)}><Icon icon={toggle ? faBars : faMinus}></Icon></NavToggle>

并且图标在内部的图标组件中发生变化。我想不出一个简单的方法来介于这两者之间。我不喜欢它们之间的变化有多快，所以我真的想实现一个较慢的过渡。

Answer 1

我认为您只需要创建一个类并将其添加到您的图标组件中。

//CSS
.nameOfClass{
transition: all 0.5s ease-in-out
}
//JS
<Icon icon={toggle ? faBars : faMinus} className="nameOfClass"/>