Introducción a las animaciones en Angular

IMPORTANTE: El paquete @angular/animations ahora está deprecado. El equipo de Angular recomienda usar CSS nativo con animate.enter y animate.leave para animaciones en todo código nuevo. Aprende más en la nueva guía de animaciones de entrada y salida. También consulta Migrando del paquete de Animations de Angular para aprender cómo puedes comenzar a migrar a animaciones CSS puras en tus aplicaciones.

La animación proporciona la ilusión de movimiento: los elementos HTML cambian su estilo a lo largo del tiempo. Las animaciones bien diseñadas pueden hacer que tu aplicación sea más divertida y fácil de usar, pero no son solo cosméticas. Las animaciones pueden mejorar tu aplicación y la experiencia del usuario de varias maneras:

• Sin animaciones, las transiciones de páginas web pueden parecer abruptas y bruscas
• El movimiento mejora enormemente la experiencia del usuario, así que las animaciones dan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones
• Las buenas animaciones llaman intuitivamente la atención del usuario hacia donde se necesita

Típicamente, las animaciones involucran múltiples transformaciones de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encoger, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir simultáneamente o secuencialmente. Puedes controlar el tiempo de cada transformación.

El sistema de animación de Angular está construido sobre la funcionalidad CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes y más. El W3C mantiene una lista de propiedades animables en su página CSS Transitions.

Acerca de esta guía

Esta guía cubre las características básicas de animación de Angular para que comiences a agregar animaciones de Angular a tu proyecto.

Primeros pasos

Los módulos principales de Angular para animaciones son @angular/animations y @angular/platform-browser.

Para comenzar a agregar animaciones de Angular a tu proyecto, importa los módulos específicos de animación junto con la funcionalidad estándar de Angular.

1. Habilitando el módulo de animaciones

   Importa provideAnimationsAsync desde @angular/platform-browser/animations/async y agrégalo a la lista de proveedores en la llamada a la función bootstrapApplication.

   Enabling Animations

   1bootstrapApplication(AppComponent, {2  providers: [3    provideAnimationsAsync(),4  ]5});

   Si necesitas animaciones inmediatas en tu aplicación

   Si necesitas que una animación ocurra inmediatamente cuando tu aplicación se carga, querrás cambiar al módulo de animaciones cargado de forma inmediata (eager). Importa provideAnimations desde @angular/platform-browser/animations en su lugar, y usa provideAnimations en lugar de provideAnimationsAsync en la llamada a la función bootstrapApplication.

   Para aplicaciones basadas en NgModule importa BrowserAnimationsModule, que introduce las capacidades de animación en el módulo raíz de tu aplicación Angular.

   src/app/app.module.ts

   import {NgModule} from '@angular/core';import {BrowserModule} from '@angular/platform-browser';import {BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({  imports: [BrowserModule, BrowserAnimationsModule],  declarations: [],  bootstrap: [],})export class AppModule {}

2. Importando funciones de animación en archivos de componentes

   Si planeas usar funciones de animación específicas en archivos de componentes, importa esas funciones desde @angular/animations.

   src/app/app.component.ts

   import {Component, HostBinding, inject} from '@angular/core';import {  trigger,  state,  style,  animate,  transition,  // ...} from '@angular/animations';import {ChildrenOutletContexts, RouterLink, RouterOutlet} from '@angular/router';import {slideInAnimation} from './animations';@Component({  selector: 'app-root',  templateUrl: 'app.component.html',  styleUrls: ['app.component.css'],  imports: [RouterLink, RouterOutlet],  animations: [    slideInAnimation,    // animation triggers go here  ],})export class AppComponent {  @HostBinding('@.disabled')  public animationsDisabled = false;  private contexts = inject(ChildrenOutletContexts);  getRouteAnimationData() {    return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation'];  }  toggleAnimations() {    this.animationsDisabled = !this.animationsDisabled;  }}

   Consulta todas las funciones de animación disponibles al final de esta guía.

3. Agregando la propiedad de metadatos de animación

   En el archivo del componente, agrega una propiedad de metadatos llamada animations: dentro del decorador @Component(). Colocas el trigger que define una animación dentro de la propiedad de metadatos animations.

   src/app/app.component.ts

   import {Component, HostBinding, inject} from '@angular/core';import {  trigger,  state,  style,  animate,  transition,  // ...} from '@angular/animations';import {ChildrenOutletContexts, RouterLink, RouterOutlet} from '@angular/router';import {slideInAnimation} from './animations';@Component({  selector: 'app-root',  templateUrl: 'app.component.html',  styleUrls: ['app.component.css'],  imports: [RouterLink, RouterOutlet],  animations: [    slideInAnimation,    // animation triggers go here  ],})export class AppComponent {  @HostBinding('@.disabled')  public animationsDisabled = false;  private contexts = inject(ChildrenOutletContexts);  getRouteAnimationData() {    return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation'];  }  toggleAnimations() {    this.animationsDisabled = !this.animationsDisabled;  }}

Animando una transición

Animemos una transición que cambia un elemento HTML único de un estado a otro. Por ejemplo, puedes especificar que un botón muestre Abrir o Cerrado basándose en la última acción del usuario. Cuando el botón está en el estado open, es visible y amarillo. Cuando está en el estado closed, es translúcido y azul.

En HTML, estos atributos se establecen usando estilos CSS ordinarios como color y opacidad. En Angular, usa la función style() para especificar un conjunto de estilos CSS para usar con animaciones. Recopila un conjunto de estilos en un estado de animación, y dale al estado un nombre, como open o closed.

ÚTIL: Creemos un nuevo componente open-close para animar con transiciones simples.

Ejecuta el siguiente comando en la terminal para generar el componente:

ng g component open-close

Esto creará el componente en src/app/open-close.component.ts.

Estado y estilos de animación

Usa la función state() de Angular para definir diferentes estados para llamar al final de cada transición. Esta función acepta dos argumentos: Un nombre único como open o closed y una función style().

Usa la función style() para definir un conjunto de estilos para asociar con un nombre de estado dado. Debes usar camelCase para los atributos de estilo que contienen guiones, como backgroundColor o envolverlos entre comillas, como 'background-color'.

Veamos cómo funciona la función state() de Angular con la función style⁣­(⁠) para establecer atributos de estilo CSS. En este fragmento de código, se establecen múltiples atributos de estilo al mismo tiempo para el estado. En el estado open, el botón tiene una altura de 200 píxeles, una opacidad de 1 y un color de fondo amarillo.

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

En el siguiente estado closed, el botón tiene una altura de 100 píxeles, una opacidad de 0.8 y un color de fondo azul.

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

Transiciones y tiempo

En Angular, puedes establecer múltiples estilos sin ninguna animación. Sin embargo, sin un mayor refinamiento, el botón se transforma instantáneamente sin desvanecimiento, sin reducción u otro indicador visible de que está ocurriendo un cambio.

Para hacer el cambio menos abrupto, necesitas definir una transición de animación para especificar los cambios que ocurren entre un estado y otro durante un período de tiempo. La función transition() acepta dos argumentos: El primer argumento acepta una expresión que define la dirección entre dos estados de transición, y el segundo argumento acepta uno o una serie de pasos animate().

Usa la función animate() para definir la duración, el retraso y el easing de una transición, y para designar la función de estilo para definir estilos mientras las transiciones están en curso. Usa la función animate() para definir la función keyframes() para animaciones de múltiples pasos. Estas definiciones se colocan en el segundo argumento de la función animate().

Metadatos de animación: duración, retraso y easing

La función animate() (segundo argumento de la función de transición) acepta los parámetros de entrada timings y styles.

El parámetro timings toma un número o una cadena definida en tres partes.

animate (duration)

o

animate ('duration delay easing')

La primera parte, duration, es requerida. La duración puede expresarse en milisegundos como un número sin comillas, o en segundos con comillas y un especificador de tiempo. Por ejemplo, una duración de una décima de segundo puede expresarse de las siguientes maneras:

• Como un número simple, en milisegundos: 100

• En una cadena, como milisegundos: '100ms'

• En una cadena, como segundos: '0.1s'

El segundo argumento, delay, tiene la misma sintaxis que duration. Por ejemplo:

• Espera 100ms y luego ejecuta durante 200ms: '0.2s 100ms'

El tercer argumento, easing, controla cómo la animación acelera y desacelera durante su ejecución. Por ejemplo, ease-in hace que la animación comience lentamente y gane velocidad a medida que progresa.

• Espera 100ms, ejecuta durante 200ms. Usa una curva de desaceleración para comenzar rápido y desacelerar lentamente hasta un punto de reposo: '0.2s 100ms ease-out'

• Ejecuta durante 200ms, sin retraso. Usa una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final: '0.2s ease-in-out'

• Comienza inmediatamente, ejecuta durante 200ms. Usa una curva de aceleración para comenzar lento y terminar a toda velocidad: '0.2s ease-in'

ÚTIL: Consulta el tema sobre curvas de easing naturales del sitio web de Material Design para información general sobre curvas de easing.

Este ejemplo proporciona una transición de estado de open a closed con una transición de 1 segundo entre estados.

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

En el fragmento de código anterior, el operador => indica transiciones unidireccionales, y <=> es bidireccional. Dentro de la transición, animate() especifica cuánto tiempo toma la transición. En este caso, el cambio de estado de open a closed toma 1 segundo, expresado aquí como 1s.

Este ejemplo agrega una transición de estado del estado closed al estado open con un arco de animación de transición de 0.5 segundos.

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

ÚTIL: Algunas notas adicionales sobre el uso de estilos dentro de las funciones state y transition.

• Usa state() para definir estilos que se aplican al final de cada transición, persisten después de que la animación se completa
• Usa transition() para definir estilos intermedios, que crean la ilusión de movimiento durante la animación
• Cuando las animaciones están deshabilitadas, los estilos de transition() pueden omitirse, pero los estilos de state() no pueden
• Incluye múltiples pares de estados dentro del mismo argumento transition():

  transition( 'on => off, off => void' )

Disparando la animación

Una animación requiere un trigger, para que sepa cuándo comenzar. La función trigger() recopila los estados y transiciones, y le da a la animación un nombre, para que puedas adjuntarla al elemento disparador en la plantilla HTML.

La función trigger() describe el nombre de la propiedad a observar para cambios. Cuando ocurre un cambio, el trigger inicia las acciones incluidas en su definición. Estas acciones pueden ser transiciones u otras funciones, como veremos más adelante.

En este ejemplo, nombraremos el trigger openClose y lo adjuntaremos al elemento button. El trigger describe los estados open y closed, y los tiempos para las dos transiciones.

ÚTIL: Dentro de cada llamada a la función trigger(), un elemento solo puede estar en un estado en cualquier momento dado. Sin embargo, es posible que múltiples triggers estén activos a la vez.

Definiendo animaciones y adjuntándolas a la plantilla HTML

Las animaciones se definen en los metadatos del componente que controla el elemento HTML a animar. Coloca el código que define tus animaciones bajo la propiedad animations: dentro del decorador @Component().

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

Cuando hayas definido un trigger de animación para un componente, adjúntalo a un elemento en la plantilla de ese componente envolviendo el nombre del trigger entre corchetes y precediéndolo con un símbolo @. Luego, puedes enlazar el trigger a una expresión de plantilla usando la sintaxis de enlace de propiedad estándar de Angular como se muestra a continuación, donde triggerName es el nombre del trigger, y expression se evalúa a un estado de animación definido.

<div [@triggerName]="expression">…</div>;

La animación se ejecuta o dispara cuando el valor de la expresión cambia a un nuevo estado.

El siguiente fragmento de código enlaza el trigger al valor de la propiedad isOpen.

<nav>  <button type="button" (click)="toggle()">Toggle Open/Close</button></nav><div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p></div>

En este ejemplo, cuando la expresión isOpen se evalúa a un estado definido de open o closed, notifica al trigger openClose de un cambio de estado. Luego depende del código openClose manejar el cambio de estado y lanzar una animación de cambio de estado.

Para elementos que entran o salen de una página (insertados o eliminados del DOM), puedes hacer que las animaciones sean condicionales. Por ejemplo, usa *ngIf con el trigger de animación en la plantilla HTML.

ÚTIL: En el archivo del componente, establece el trigger que define las animaciones como el valor de la propiedad animations: en el decorador @Component().

En el archivo de plantilla HTML, usa el nombre del trigger para adjuntar las animaciones definidas al elemento HTML a animar.

Revisión del código

Aquí están los archivos de código discutidos en el ejemplo de transición.

import {Component, input} from '@angular/core';import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations';@Component({  selector: 'app-open-close',  animations: [    trigger('openClose', [      // ...      state(        'open',        style({          height: '200px',          opacity: 1,          backgroundColor: 'yellow',        }),      ),      state(        'closed',        style({          height: '100px',          opacity: 0.8,          backgroundColor: 'blue',        }),      ),      transition('open => closed', [animate('1s')]),      transition('closed => open', [animate('0.5s')]),      transition('* => closed', [animate('1s')]),      transition('* => open', [animate('0.5s')]),      transition('open <=> closed', [animate('0.5s')]),      transition('* => open', [animate('1s', style({opacity: '*'}))]),      transition('* => *', [animate('1s')]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseComponent {  logging = input(false);  isOpen = true;  toggle() {    this.isOpen = !this.isOpen;  }  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }    // openClose is trigger name in this example    console.warn(`Animation Trigger: ${event.triggerName}`);    // phaseName is "start" or "done"    console.warn(`Phase: ${event.phaseName}`);    // in our example, totalTime is 1000 (number of milliseconds in a second)    console.warn(`Total time: ${event.totalTime}`);    // in our example, fromState is either "open" or "closed"    console.warn(`From: ${event.fromState}`);    // in our example, toState either "open" or "closed"    console.warn(`To: ${event.toState}`);    // the HTML element itself, the button in this case    console.warn(`Element: ${event.element}`);  }}

<nav>  <button type="button" (click)="toggle()">Toggle Open/Close</button></nav><div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p></div>

:host {  display: block;  margin-top: 1rem;}.open-close-container {  border: 1px solid #dddddd;  margin-top: 1em;  padding: 20px 20px 0px 20px;  color: #000000;  font-weight: bold;  font-size: 20px;}

Resumen

Aprendiste a agregar animación a una transición entre dos estados, usando style() y state() junto con animate() para el tiempo.

Aprende sobre características más avanzadas en las animaciones de Angular en la sección de Animaciones, comenzando con técnicas avanzadas en transiciones y triggers.

Resumen de la API de animaciones

La API funcional proporcionada por el módulo @angular/animations proporciona un lenguaje específico de dominio (DSL) para crear y controlar animaciones en aplicaciones Angular. Consulta la referencia de la API para un listado completo y detalles de sintaxis de las funciones principales y estructuras de datos relacionadas.

Más sobre animaciones de Angular

ÚTIL: Consulta esta presentación, mostrada en la conferencia AngularConnect en noviembre de 2017, y el código fuente adjunto.

También puede que te interese lo siguiente: