2 min read
By Einar Afiouni
December 5, 2022
Let's look at a simple example:
In this very simple example we have three lines of text. When the middle line is clicked, we apply a
display: none to the element so that we can remove it from the DOM.
Now if we wanted to slowly fade out the text before we could instead use an animation
But now the element is never truly removed from the DOM, only invisible. So how do we solve this? We could set a timer when the text is clicked and then hide it after the duration of the animation has passed
This works, but is fragile. If we were to change the animation duration to anything else we'd either have to remember to change the timeout, or it would just disappear either too late or too early. So can we do this more robust?
Turns out we can! We can listen to the elements
animationend event and hide the element only after the animation has ended.
This way, no matter what the animation duration is set to, the element will only become hidden after the animation has actually ended.
We can also listen to other animation events like
animationiteration. In React you can add these event-listeners with
onAnimationEnd etc directly on the element.
If one element has multiple animations and you want to do different things based on which animation is running, you'd have to check in the