Transiciones y temporización
Animar entre estados mediante transiciones
Transiciones y temporización es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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 entre estados
Los estados describen dónde se encuentra el elemento; las transiciones describen cómo se mueve entre ellos. La función transition asocia un cambio de estado con una animación.
La función transition
transition recibe una expresión de cambio de estado y uno o más pasos de animación.
transition('closed => open', animate('300ms'))Operadores de dirección
Utilice => para una dirección y <=> para ambas direcciones.
transition('open <=> closed', animate('250ms ease-in-out'))La función animate
animate define la temporización: duración, retraso opcional y función de aceleración. El formato de cadena es "duration delay easing".
animate('500ms 100ms ease-out')Unidades de duración
Las duraciones aceptan ms o s. Un número sin unidad se interpreta como milisegundos.
animate('0.4s')
animate('400ms')
animate(400)Funciones de aceleración
La aceleración controla la velocidad: linear, ease, ease-in, ease-out, ease-in-out o una función cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Estilos de destino en línea
animate puede recibir un segundo argumento style para animar hacia estilos que no estén vinculados a un estado con nombre.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Varios pasos
Pase un array de pasos para ejecutar una secuencia dentro de una sola transición.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Transiciones comodín
Utilice * para coincidir con transiciones desde cualquier estado o hacia cualquier estado; resulta práctico para efectos de entrada genéricos.
transition('* => open', animate('200ms'))Estilos iniciales
Un style() independiente antes de animate() establece el punto inicial; después, Angular anima hasta los estilos del estado de destino.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Prácticas recomendadas de temporización
Mantenga breves las transiciones de la interfaz (150-300 ms) para conservar la capacidad de respuesta. Reserve las duraciones más largas para movimientos amplios e intencionados. Adapte la aceleración a la sensación que desea transmitir.
Comprobación rápida
Compruebe cuánto entiende las transiciones y la temporización.
Resumen
Ha aprendido que transition conecta los cambios de estado (con => o <=>) con pasos animate. La cadena de temporización es duration delay easing, y puede encadenar pasos style/animate para crear secuencias.
Preguntas frecuentes
¿La lección «Transiciones y temporización» es gratis?
Sí — el texto completo de «Transiciones y temporización» 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 «Transiciones y temporización»?
Animar entre estados mediante transiciones 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 2 de 4.
¿Cuánto tiempo toma la lección «Transiciones y temporización»?
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