Animaciones de entrada y salida
Animar elementos al entrar y salir
Animaciones de entrada y salida es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Animar la presencia
A menudo querrá que los elementos se animen al aparecer o desaparecer, por ejemplo, cuando se añade o elimina un elemento de una lista. Angular proporciona los alias :enter y :leave para ello.
void y presencia
Un elemento que no está en el DOM se encuentra en el estado void. Entrar significa void => * y salir significa * => void.
:enter como alias
:enter es una abreviatura de void => *. Úselo para animar los elementos cuando se añaden.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
]):leave como alias
:leave es una abreviatura de * => void. Angular mantiene el elemento en el DOM hasta que termina la animación de salida.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])Activar con el control de flujo
Aplique el trigger a los elementos administrados por @if o @for. Añadirlos o eliminarlos activa las animaciones de entrada o salida.
@if (visible()) {
<div [@fade]>Hello</div>
}Un trigger de desvanecimiento
Aquí tiene un trigger reutilizable para aparecer y desaparecer gradualmente.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])Ejemplo de entrada deslizante
Combine transform y opacity para crear un efecto de entrada deslizante.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])Animaciones de elementos de lista
Coloque el trigger en cada elemento dentro de @for; añadir o eliminar elementos anima cada uno de forma independiente.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}Por qué la salida necesita el motor
Normalmente, un elemento eliminado desaparece al instante. El motor de animaciones intercepta la eliminación, conserva el nodo, ejecuta la animación :leave y después lo elimina, todo automáticamente.
Deshabilitar animaciones
Vincule @.disabled para omitir condicionalmente las animaciones, lo que resulta útil para las preferencias de movimiento reducido o para el renderizado inicial.
<div [@.disabled]="prefersReducedMotion">...</div>Prácticas recomendadas
Mantenga breves y sutiles las animaciones de entrada y salida. Respete prefers-reduced-motion. Anime transform y opacity (compatibles con la GPU) en lugar de propiedades del diseño para lograr mayor fluidez.
Comprobación rápida
Compruebe su comprensión de las animaciones de entrada y salida.
Resumen
Ha aprendido que :enter (void => *) y :leave (* => void) animan los elementos cuando se añaden y eliminan, y funcionan con @if/@for. El motor conserva los nodos que salen hasta que termina su animación.
Preguntas frecuentes
¿La lección «Animaciones de entrada y salida» es gratis?
Sí — el texto completo de «Animaciones de entrada y salida» 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 «Animaciones de entrada y salida»?
Animar elementos al entrar y salir 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 3 de 4.
¿Cuánto tiempo toma la lección «Animaciones de entrada y salida»?
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