CSS transitions

---

tags: [development, css, transitions]

CSS transition mechanisms

We have a few components using idle and active (or similarly named) CSS classes to match a pattern commonly used in transition libs to ensure transitions are run consistently. Maquette has a great breakdown of how this works:

The best way to explain this technique is through an example. Let us say an element with the enterAnimation "slideUp" is added, then the following happens:

1. The CSS class "slideUp" is added to the element
2. Immediately afterwards, the CSS class "slideUp-active" gets added.
3. The browser waits until a CSS transition finishes on the element
4. Both CSS classes are removed again.

Worth noting that slideUp represents the idle class in our case.

Additional resources

• https://maquettejs.org/docs/animations.html#css-transitions
• https://sijakret.github.io/lit-transition/css-transitions
• https://reactcommunity.org/react-transition-group/css-transition