He estado jugando con las animaciones angulares y me preguntaba si hay una forma mejor/recomendada de evitar el estilo en línea... por ejemplo,
@Component({ selector: 'page-that-needs-anime', templateUrl: './anime.component.html', styleUrls: ['./anime.component.scss'], animations: [ trigger('animeTrigger', [ state('in', style({transform: 'translateY(0)'})), transition('void => *', [ animate(700, keyframes([ style({opacity: 0, transform: 'translateY(-100%)', offset: 0}), style({opacity: 1, transform: 'translateY(25px)', offset: 0.3}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ])) ]) //you get the idea ... *Import statement is taken out for brevityDe todos modos, las "animaciones" podrían usar una referencia como styleUrls & templateUrl arriba. He visto a alguien referirse a él como una constante, pero me preguntaba si había una forma 'oficial de Angular'.
Puede guardar sus animaciones en archivos separados.
// animations.ts import { trigger, state, style, transition, animate } from '@angular/animations'; export const Animations = { animeTrigger: trigger('animeTrigger', [ state('in', style({transform: 'translateY(0)'})), transition('void => *', [ animate(700, keyframes([ style({opacity: 0, transform: 'translateY(-100%)', offset: 0}), style({opacity: 1, transform: 'translateY(25px)', offset: 0.3}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ])) ]) }Componente
import { Animations } from './animations' @Component({ selector: 'page-that-needs-anime', templateUrl: './anime.component.html', styleUrls: ['./anime.component.scss'], animations: [ Animations.animeTrigger ] })Tomado de la documentación:
Creación de animaciones reutilizables
Para crear una animación reutilizable, use el método animation() para definir una animación en un archivo .ts separado y declare esta definición de animación como una variable de exportación constante. Luego puede importar y reutilizar esta animación en cualquiera de los componentes de su aplicación usando la API useAnimation().
*src/app/animations.ts* import { animation, trigger, animateChild, group, transition, animate, style, query } from '@angular/animations'; export const transAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', backgroundColor: '{{ backgroundColor }}' }), animate('{{ time }}') ]);En el fragmento de código anterior, transAnimation se vuelve reutilizable al declararlo como una variable de exportación.
Nota: Las entradas de altura, opacidad, color de fondo y tiempo se reemplazan durante el tiempo de ejecución.
Puede importar la variable transAnimation reutilizable en su clase de componente y reutilizarla usando el método useAnimation() como se muestra a continuación.
*src/app/open-close.component.ts* import { Component } from '@angular/core'; import { useAnimation, transition, trigger, style, animate } from '@angular/animations'; import { transAnimation } from './animations'; @Component({ trigger('openClose', [ transition('open => closed', [ useAnimation(transAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s' } }) ]) ]) ], })
Citado de: https://angular.io/guide/reusable-animations