Search code examples
reactjstailwind-css

How to apply the rotate effect both closing and opening this select input?

I have this down arrow image, which rotates to an up arrow when the boolean "open" function switches, with a transition effect.

<img src="./downArrow.png" className={`${(open) && "rotate-180 transition-all"}`} />

But when I try to close the container, the arrow goes back to its original state without the transition effect. I tried already a few different ways to apply this effect to (!open) as well but none worked.

How can I do this?

Solution

  • In your code, the transition-all class also gets removed when open is false.

    To avoid this, move transition-all out of the condition:

    <img src="./downArrow.png" className={`${open && "rotate-180"} transition-all`} />

    This way, transition-all is always present in the class string even when open is false.