What is the purpose of Angular animations?

Question

So I did some research and although I didn’t find any argument for nor against Angular animations performance-wise (as already stated in the question above), there are very good arguments to use Angular animations feature-wise which should be good enough for purists who want to have CSS only in sheets, at least in certain cases.

Let me list some useful features where each alone makes a convincing case for Angular animations. Most of them can be found in Angular animations documentation:

Transition styles – these styles are only applied during transition from one state to another – only while an element is being animated, and one uses them like this:
```
transition('stateA => stateB', [style({...}), animate(100)])
```
Trying to do the same with CSS only might not be as expressive in terms of which previous state led to the next. And it can be outright clunky if the animation has to differ based on the initial state but the end state is the same.
The void state together with :enter and :leave aliases (void documentation, :leave and :enter documentation) – Let you animate elements being added or removed from the DOM.
```
transition('stateA => void', animate(...))
```
This is very cool because previously, although it was easy enough to animate the addition, the removal was more complicated and required to trigger animation, wait till its end and only after that remove the element from the DOM, all with JS.
Automatic property calculation '*' (documentation) – Allows for performing traditionally difficult animations like height transitions for elements with dynamic height. This problem required either to set fixed height on element (inflexible), use max-height with tuned transition function (not perfect) or query element’s height with JS (potentially causing unnecessary reflows). But now with Angular it is as easy as this:
```
trigger('collapsible', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: '0' })),
  transition('expanded <=> collapsed', animate(100))
])
```
And the animation is smooth and “complete” because the actual height of the element is used for the transition.
Animation callbacks (documentation) – this is something that wasn’t possible with CSS animations (if not maybe emulated with setTimeout) and is handy eg. for debugging.
Unlike stated in the question, it is actually possible to use instance fields as params in Angular animations, see this question. I find it much easier to use than manipulating CSS variables through DOM API as shown here on MDN, not mentioning the limited support in some browsers.

If you need any of the features listed above, Angular can be a better tool for the task. Also when there is many animations to manage in a component, and this is just my personal opinion, I find it easier to organize animations the Angular way than have them in sheets, where it is harder too see the relationships between them and various element states.

Leave a Comment Cancel reply