Is there a way to fade between two icon states in a button in React?

Saif eldeen Adel 0
Viewed 18

So I have like a hamburger nav bar icon, when clicked the icon changes from a hamburger to a minus. The state logic is just a setState function placed in the NavToggle component (button) like this.

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

And the icon changes in the icon component inside. I cant think of a simple way to fade in between these two. I dont like how snappy the change between them is so I'd really like to implement a slower transition.

css-transitions reactjs css
1 Answers

I think you just have to create a class and add it to your icon component.

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