Cómo agregar animaciones de transición en la navegación con Angular 17

Constantemente busco formas de mejorar la interacción de los usuarios en los sitios web. Hace poco, mientras creaba la demo de una tienda, pensé en cómo enriquecer la experiencia de usuario al navegar entre las páginas de productos. Esto me llevó a experimentar con una característica fantástica en Angular 17: "View Transitions".

¿Qué son las transiciones de página?

Las transiciones de página son animaciones o efectos visuales que ocurren cuando un usuario pasa de una página web a otra. Estas transiciones hacen que la experiencia de navegación sea más fluida y atractiva. Aquí tienes una guía básica sobre animaciones web que te puede ayudar a entender los conceptos fundamentales.

Cómo implementar transiciones de página en Angular

Angular 17 nos facilita el uso de transiciones gracias a la función withViewTransitions. Vamos a ver cómo implementarlas en nuestro proyecto.

👉🏽 ¿Por qué pagar por hosting? Haz clic aquí para desplegar tus aplicaciones Angular gratis en un VPS confiable

Agregar withViewTransitions al Router

Primero, necesitamos habilitar la funcionalidad de transiciones de página en nuestro proyecto de Angular. Abre el archivo app.config.ts y actualiza la función provideRouter:

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withViewTransitions()),
    provideHttpClient(withFetch()),
  ],
};

Este fragmento de código activa la función de transiciones de página. La documentación oficial del router de Angular ofrece más detalles sobre cómo funciona el enrutamiento en Angular.

Definir las transiciones

El funcionamiento de las transiciones se define mediante dos selectores especiales: ::view-transition-old(root) y ::view-transition-new(root).

• ::view-transition-old: se aplica a la página actual antes de navegar a la siguiente.

• ::view-transition-new: se aplica a la nueva página que se va a mostrar.

Si estás dando tus primeros pasos con animaciones en CSS, este tutorial de animaciones CSS te resultará muy útil.

Crear animaciones básicas

Crear animaciones puede parecer un reto al inicio, pero con las herramientas adecuadas es bastante sencillo. Yo utilicé un generador de animaciones CSS Keyframe para armar animaciones básicas de entrada y salida.

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
 
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
 
@keyframes exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
 
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

Asigna estas animaciones a sus selectores correspondientes:

::view-transition-old(root) {
  animation: exit 2s ease 0s 1 normal forwards;
}
 
::view-transition-new(root) {
  animation: enter 3s ease 0s 1 normal forwards;
}

Al guardar estos cambios, tu sitio web tendrá transiciones fluidas y atractivas entre cada página.

Conclusión

Angular 17 hace que sea muy sencillo agregar transiciones de página, y son un excelente recurso para mejorar la experiencia de usuario. Siguiendo estos pasos, puedes crear animaciones atractivas que hagan tu sitio web más interactivo y agradable.

Para leer más y ver otros ejemplos, revisa la guía de animaciones de Angular y este tutorial detallado sobre transiciones de página.