IMPORTANTE: O pacote @angular/animations agora está depreciado. A equipe Angular recomenda usar CSS nativo com animate.enter e animate.leave para animations em todo código novo. Saiba mais no novo guia de animations de entrada e saída. Veja também Migrando do pacote de Animations do Angular para aprender como você pode começar a migrar para animations CSS puras em suas aplicações.
Este tópico fornece alguns exemplos de como criar animations reutilizáveis.
Criar animations reutilizáveis
Para criar uma animation reutilizável, use a função animation() para definir uma animation em um arquivo .ts separado e declare esta definição de animation como uma variável const exportada.
Você pode então importar e reutilizar esta animation em qualquer um dos components da sua aplicação usando a função useAnimation().
animations.ts
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', backgroundColor: '{{ backgroundColor }}', }), animate('{{ time }}'),]);export const sharedAnimation = animation([ style({ height: 0, opacity: 1, backgroundColor: 'red', }), animate('1s'),]);export const triggerAnimation = trigger('openClose', [ transition('open => closed', [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s', }, }), ]),]);No trecho de código anterior, transitionAnimation é tornado reutilizável ao declará-lo como uma variável exportada.
ÚTIL: Os inputs height, opacity, backgroundColor e time são substituídos durante o runtime.
Você também pode exportar parte de uma animation.
Por exemplo, o seguinte trecho exporta o trigger de animation.
animations.1.ts
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', backgroundColor: '{{ backgroundColor }}', }), animate('{{ time }}'),]);export const sharedAnimation = animation([ style({ height: 0, opacity: 1, backgroundColor: 'red', }), animate('1s'),]);export const triggerAnimation = trigger('openClose', [ transition('open => closed', [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s', }, }), ]),]);A partir deste ponto, você pode importar variáveis de animation reutilizáveis na classe do seu component.
Por exemplo, o seguinte trecho de código importa a variável transitionAnimation e a usa através da função useAnimation().
open-close.component.ts
import {Component, input} from '@angular/core';import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';import {transitionAnimation} from './animations';@Component({ selector: 'app-open-close-reusable', animations: [ trigger('openClose', [ transition('open => closed', [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s', }, }), ]), ]), ], templateUrl: 'open-close.component.html', styleUrls: ['open-close.component.css'],})export class OpenCloseBooleanComponent { isOpen = false; toggle() { this.isOpen = !this.isOpen; } logging = input(false); onAnimationEvent(event: AnimationEvent) { if (!this.logging) { return; } }}Mais sobre animations do Angular
Você também pode estar interessado em: