Conceptos básicos de animación: trigger y state
Definir estados y triggers de animación
Conceptos básicos de animación: trigger y state es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Animaciones de Angular
El sistema de animaciones de Angular es un DSL declarativo basado en la API Web Animations. Usted describe estados y transiciones, y Angular se encarga de la temporización y de las actualizaciones del DOM.
Configuración
Proporcione las animaciones en la configuración de arranque para habilitar el motor de animaciones.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});El trigger
Un trigger da nombre a una animación y agrupa sus estados y transiciones. Se asocia a un elemento mediante un enlace.
animations: [
trigger('openClose', [
// states and transitions
])
]Definir estados
state vincula un estado con nombre a un conjunto de estilos CSS que debe tener el elemento mientras se encuentra en ese estado.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))La función style
style recibe un objeto de propiedades CSS. Utilice claves en camelCase o nombres CSS entre comillas.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Vincular el trigger
En la plantilla, vincule @triggerName a una expresión que devuelva el estado actual.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Un trigger completo
Aquí tiene un trigger con dos estados y una transición entre ellos.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Controlar el estado desde el componente
El componente solo cambia un booleano o una cadena; Angular interpola entre los estilos de los estados correspondientes.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Estado comodín
El comodín * coincide con cualquier estado y resulta útil para valores predeterminados y para las animaciones de entrada y salida que se explican más adelante.
state('*', style({ opacity: 1 }))Estado void
El estado especial void representa un elemento que no está en el DOM y es la base de las animaciones de entrada y salida.
¿Por qué usar animaciones declarativas?
Las animaciones declarativas mantienen la lógica de temporización fuera de los componentes, se integran con el ciclo de vida de Angular y realizan automáticamente la limpieza cuando los elementos salen del DOM.
Comprobación rápida
Compruebe cuánto entiende los conceptos básicos de las animaciones.
Resumen
Ha aprendido que las animaciones de Angular utilizan un trigger que contiene definiciones de state (cada una asigna un nombre a style), vinculado en la plantilla mediante [@trigger]. Los estados void y * abarcan los estados ausente y cualquiera.
Preguntas frecuentes
¿La lección «Conceptos básicos de animación: trigger y state» es gratis?
Sí — el texto completo de «Conceptos básicos de animación: trigger y state» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Conceptos básicos de animación: trigger y state»?
Definir estados y triggers de animación Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Conceptos básicos de animación: trigger y state»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos básicos de animación: trigger y state
- Transiciones y temporización
- Animaciones de entrada y salida
- Keyframes y animaciones escalonadas