Transiciones en el Router Angular 17

Estoy constantemente explorando formas de mejorar la interacción del usuario en sitios web. Recientemente, mientras construía una demostración de tienda, pensé en mejorar la experiencia del usuario al navegar entre las páginas de productos. Esto me llevó a jugar con una característica fantástica en Angular 17: "Transiciones de Vista".

¿Qué son las Transiciones de Página?

Las transiciones de página son animaciones o efectos visuales que ocurren cuando un usuario se mueve de una página web a otra.

Estas transiciones hacen que la experiencia de navegación sea más suave y atractiva. Aquí hay una guía básica sobre animaciones web que puede ayudarte a entender los fundamentos.

Implementando Transiciones de Página en Angular

Angular 17 nos ayuda a utilizar transiciones gracias a withViewTransitions, función. Vamos a explorar cómo implementarlas en nuestro proyecto.

Agregar withViewTransitions function al Router

Primero, necesitamos habilitar la función de transición de página en nuestro proyecto 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 proporciona más detalles sobre cómo funciona el router en Angular.

Definir Transiciones

La magia de las transiciones está definida por 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 está a punto de mostrarse.

Si eres nuevo en las animaciones CSS, este tutorial de animaciones CSS te será útil.

Crear Animaciones Básicas

Crear animaciones puede parecer desafiante, pero con las herramientas adecuadas, es bastante manejable. Utilicé un Generador de Animación CSS para crear 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 los selectores respectivos:

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

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

¡Después de guardar estos cambios, tu sitio web tendrá transiciones suaves y visualmente atractivas entre páginas!

Conclusión

Angular 17 facilita agregar transiciones de página, siendo una excelente manera de lograrlo. Siguiendo estos pasos, puedes crear animaciones atractivas que hagan tu sitio web más interactivo y agradable.

Para más, echa un vistazo a la guía de animaciones de Angular y este tutorial completo sobre transiciones de página.