Animaciones Modernas de Angular: Adiós DSL, Poder

Angular ha desaprobado el antiguo módulo de animaciones. ¿Cómo logramos ahora movimiento avanzado sin el DSL heredado? Con el kit moderno: los nuevos primitives de enter y leave más CSS real. En esta guía aprenderás a crear transiciones suaves de entrada y salida, encadenar efectos en secuencia, animar ítems de listas y aplicar escalonados, todo con CSS y sin el paquete legacy.

Empezamos con un ejemplo básico: un botón que muestra u oculta una tarjeta de producto controlada por una signal. Cuando la signal cambia, el componente entra o sale del DOM, que es justo lo que necesitamos para las animaciones modernas.

Primero, añade clases CSS a través de los atributos animate.enter y animate.leave en el componente. Por ejemplo, usa las clases fade-slide-in para la entrada y fade-slide-out para la salida. Angular añade y elimina estas clases en el momento justo y, lo más importante, espera a que la animación CSS termine antes de retirar el elemento del DOM. Esto resuelve una limitación de CSS puro en salidas limpias.

Define un keyframes llamado fadeSlideIn con un estado inicial de opacidad 0 y una traslación hacia abajo de 16 px. La clase fade-slide-in aplica la animación fadeSlideIn durante 1000 ms con ease-out, logrando un suave fundido con deslizamiento hacia su posición final. Para la salida, reutiliza el mismo keyframes en modo reverse con ease-in mediante la clase fade-slide-out. Resultado: una entrada y salida fluidas sin necesidad del antiguo módulo.

Encadenar animaciones también es sencillo, porque todo es CSS. Crea dos animaciones: fadeIn que parte con opacidad 0 y una traslación horizontal del 50 por ciento, y popIn que juega con el scale de 0.98 a 1.02 para un efecto de rebote sutil. En la clase enter-chain, declara animation con fadeIn 1000 ms ease-out y, a continuación, popIn 750 ms ease-out con un retraso de 1000 ms y fill-mode backwards para que los estilos del primer fotograma se apliquen durante la espera. Para leave-chain invierte el orden y ejecuta ambas en reverse, usando forwards en la primera para conservar el estado final al terminar. Angular esperará la animación más larga antes de retirar el elemento.

Para listas, el patrón es el mismo pero aplicado a cada ítem. Añade animate.enter con la clase stagger-in y animate.leave con stagger-out en cada elemento. Define un keyframes fadeUp que parte con opacidad 0 y una traslación vertical de 30 px. Aplica fadeUp 2000 ms ease-out con fill-mode both para la entrada y la misma animación en reverse con ease-in y both para la salida. Así cada elemento entra y sale con una transición clara y consistente.

Para crear un efecto escalonado, pasa el índice del ítem a una variable CSS personalizada llamada --i mediante enlace de estilos. Después, en CSS, ajusta animation-delay con calc de var de --i por 150 ms tanto en stagger-in como en stagger-out. El primer elemento arranca inmediato, el segundo tras 150 ms, el tercero tras 300 ms, y así sucesivamente. Con una sola línea por clase logras un stagger elegante al entrar y al salir.

En resumen, Angular decide el cuándo con sus primitives de enter y leave, mientras que CSS decide el cómo. Puedes encadenar pasos con retrasos, reutilizar keyframes en reverse para salidas impecables, y escalarlo a listas con un escalonado flexible gracias a variables CSS. Si necesitas contemplar accesibilidad, envuelve tus reglas en una media query de prefers reduced motion para reducir o desactivar las animaciones en usuarios sensibles al movimiento.

En Q2BSTUDIO desarrollamos software a medida y aplicaciones a medida, y podemos ayudarte a implementar estas animaciones modernas en tus interfaces Angular dentro de soluciones empresariales robustas. Integramos inteligencia artificial, agentes IA y IA para empresas, reforzamos la ciberseguridad, desplegamos servicios cloud AWS y Azure, y potenciamos la analítica con servicios de inteligencia de negocio y Power BI. Si buscas un partner que combine diseño de experiencia, rendimiento y escalabilidad, visita nuestro servicio de desarrollo de software y aplicaciones a medida o conoce nuestras capacidades de inteligencia artificial para empresas.

¿Quieres llevar tu front a otro nivel con animaciones fluidas, accesibles y mantenibles, o necesitas evolucionar tu plataforma con automatización de procesos, ciberseguridad avanzada o servicios cloud en AWS y Azure? Nuestro equipo puede ayudarte a diseñar, construir y escalar soluciones end to end con enfoque en calidad, rendimiento y posicionamiento digital.