Angular 37: Angular Animations
easy⏱ 5 mincourseangular
trigger + state: naming the animation and its resting states
trigger('fadeSlide', [...]) is the named entry point bound in the template. state('in', style({ opacity: 1, transform: 'translateY(0)' })) describes what a named, steady state looks like — Angular jumps straight to these styles with no animation when there's no matching transition().
trigger('fadeSlide', [
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
])
transition + animate: what happens moving between states
transition('void => *', [...]) matches an element entering the DOM (from the special void state to any state, *); transition('* => void', [...]) matches it leaving. Each pairs a starting style() with animate('200ms ease-out', style({...})), which describes duration, easing, and the destination styles to interpolate toward.
transition('void => *', [
style({ opacity: 0, transform: 'translateY(-10px)' }),
animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
])
Wiring it up: animations metadata + [@triggerName] binding
The trigger(...) definitions go in the component's animations: [...] array (a sibling of template in @Component({...})), and the element that should animate gets a property binding with the @ prefix matching the trigger's name — [@fadeSlide] alone is enough to hook into void => * / * => void; bind it to an expression like [@fadeSlide]="state" when using named state()s.