Angular 37: Animaciones en Angular
easy⏱ 5 mincourseangular
trigger + state: nombrando la animación y sus estados de reposo
trigger('fadeSlide', [...]) es el punto de entrada nombrado que se vincula en la plantilla. state('in', style({ opacity: 1, transform: 'translateY(0)' })) describe cómo se ve un estado estable y nombrado — Angular salta directamente a estos estilos sin animación cuando no hay una transition() que coincida.
trigger('fadeSlide', [
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
])
transition + animate: qué sucede al pasar entre estados
transition('void => *', [...]) coincide con un elemento que entra al DOM (desde el estado especial void hacia cualquier estado, *); transition('* => void', [...]) coincide con su salida. Cada una empareja un style() inicial con animate('200ms ease-out', style({...})), que describe duración, easing, y los estilos de destino hacia los cuales interpolar.
transition('void => *', [
style({ opacity: 0, transform: 'translateY(-10px)' }),
animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
])
Conectándolo: metadatos animations + binding [@triggerName]
Las definiciones de trigger(...) van en el arreglo animations: [...] del componente (hermano de template en @Component({...})), y el elemento que debe animarse recibe un binding de propiedad con el prefijo @ que coincide con el nombre del trigger — [@fadeSlide] solo ya es suficiente para engancharse a void => * / * => void; vincúlalo a una expresión como [@fadeSlide]="state" al usar state()s nombrados.