Subscribe on changes!

Transition element removes class that existed on the element before transition was triggered

avatar
Dec 11th 2020

Version

3.0.4

Reproduction link

https://codepen.io/HJBDev/pen/abmBYjx

If you look at the HTML box, you can see that the element has opacity-75 on it to make the element translucent. When the animation triggers, transitioning from 0 to 75 opacity, the class is removed.

Steps to reproduce

Put a class on an element, create a transition that uses that same class, trigger the transition. The initial class gets removed.

What is expected?

The original class is reinstated after the transition has completed.

What is actually happening?

The class stays removed.


This is really only an issue for utility CSS frameworks. I was using the translate classes in tailwind to offset some notifications that transition in so it's obvious there are multiple notifications on screen.

As you can see one of the notifications looks wonky, because the transform class I use for the entrance transition was also meant to be used to offset that particular element (if that makes sense)

https://i.imgur.com/KLECaAs.png

I'm not entirely sure the best way of remedying the problem. Maybe storing the original classList and then comparing them afterwards?

avatar
Dec 11th 2020

The problem is that you shouldn't have the opacity-75 always set because it is defined after opacity-0 and therefore has a higher priority. That's why there is no initial animation because the element has both classes and only opacity-75 is applied. What you need to do is create another CSS selector that applies the starting and ending state (opacity-0) and that has a higher css specificity than .opacity-75.

Classes should not be repeated on an element anyway (that's why classList is a Set that ignores duplicates). In this case, even if the class was preserved, you would still see the same problem.