Animations de transition de route

Les animations de transition de route améliorent l'expérience utilisateur en offrant des transitions visuelles fluides lors de la navigation entre les différentes vues de votre application Angular. Le router Angular prend en charge nativement l'API View Transitions du navigateur, ce qui permet des animations fluides entre les changements de route dans les navigateurs compatibles.

Utile : L'intégration native des View Transitions dans le router est actuellement en developer preview. Les View Transitions natives sont une fonctionnalité de navigateur relativement récente, dont la prise en charge reste limitée selon les navigateurs.

Fonctionnement des view transitions

Les view transitions utilisent l'API native document.startViewTransition du navigateur pour créer des animations fluides entre les différents états de votre application. L'API fonctionne ainsi :

Capture de l'état courant - Le navigateur prend une capture d'écran de la page courante
Exécution de la mise à jour du DOM - Votre fonction de callback s'exécute pour mettre à jour le DOM
Capture du nouvel état - Le navigateur capture l'état mis à jour de la page
Lecture de la transition - Le navigateur anime le passage de l'ancien état au nouveau

Voici la structure de base de l'API startViewTransition :

document.startViewTransition(async () => {
  await updateTheDOMSomehow();
});

Pour plus de détails sur l'API du navigateur, consultez l'explainer de Chrome.

Comment le router utilise les view transitions

Le router Angular intègre les view transitions au cycle de vie de la navigation pour créer des changements de route fluides. Pendant la navigation, le router :

Termine la préparation de la navigation - La correspondance des routes, le lazy loading, les guards, les resources et les resolvers s'exécutent
Lance la view transition - Le router appelle startViewTransition quand les routes sont prêtes à être activées
Met à jour le DOM - Le router active les nouvelles routes et désactive les anciennes dans le callback de la transition
Finalise la transition - La promise de la transition se résout quand Angular a terminé le rendu

L'intégration des view transitions dans le router agit comme une amélioration progressive. Quand les navigateurs ne prennent pas en charge l'API View Transitions, le router effectue des mises à jour normales du DOM sans animation, ce qui garantit que votre application fonctionne dans tous les navigateurs.

Activer les view transitions dans le router

Activez les view transitions en ajoutant la fonctionnalité withViewTransitions à la configuration de votre router. Angular prend en charge les deux approches de bootstrap, standalone et NgModule :

Bootstrap standalone

import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter, withViewTransitions} from '@angular/router';
import {routes} from './app.routes';

bootstrapApplication(MyApp, {
  providers: [provideRouter(routes, withViewTransitions())],
});

Bootstrap avec NgModule

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})],
})
export class AppRouting {}

Essayez l'exemple « count » sur StackBlitz

Cet exemple montre comment la navigation du router peut remplacer les appels directs à startViewTransition pour les mises à jour du compteur.

Personnaliser les transitions avec CSS

Vous pouvez personnaliser les view transitions avec CSS pour créer des effets d'animation uniques. Le navigateur crée des éléments de transition distincts que vous pouvez cibler avec des sélecteurs CSS.

Pour créer des transitions personnalisées :

Ajoutez view-transition-name - Attribuez des noms uniques aux éléments que vous voulez animer
Définissez des animations globales - Créez des animations CSS dans vos styles globaux
Ciblez les pseudo-éléments de transition - Utilisez les sélecteurs ::view-transition-old() et ::view-transition-new()

Voici un exemple qui ajoute un effet de rotation à un élément compteur :

/* Define keyframe animations */
@keyframes rotate-out {
  to {
    transform: rotate(90deg);
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(-90deg);
  }
}

/* Target view transition pseudo-elements */
::view-transition-old(count),
::view-transition-new(count) {
  animation-duration: 200ms;
  animation-name: -ua-view-transition-fade-in, rotate-in;
}

::view-transition-old(count) {
  animation-name: -ua-view-transition-fade-out, rotate-out;
}

Important : Définissez les animations de view transition dans votre fichier de styles globaux, pas dans les styles des composants. L'encapsulation des vues d'Angular limite la portée des styles de composant, ce qui les empêche de cibler correctement les pseudo-éléments de transition.

Essayez l'exemple « count » mis à jour sur StackBlitz

Contrôle avancé des transitions avec onViewTransitionCreated

La fonctionnalité withViewTransitions accepte un objet d'options avec un callback onViewTransitionCreated pour un contrôle avancé des view transitions. Ce callback :

S'exécute dans un contexte d'injection
Reçoit un objet ViewTransitionInfo contenant :
- L'instance de ViewTransition issue de startViewTransition
- L'ActivatedRouteSnapshot de la route que l'on quitte
- L'ActivatedRouteSnapshot de la route vers laquelle on navigue

Utilisez ce callback pour personnaliser le comportement de la transition selon le contexte de navigation. Par exemple, vous pouvez ignorer les transitions pour certains types de navigation :

import {inject} from '@angular/core';
import {Router, withViewTransitions, isActive, IsActiveMatchOptions} from '@angular/router';

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.currentNavigation()!.finalUrl!;

    // Skip transition if only fragment or query params change
    const config: Partial<IsActiveMatchOptions> = {
      paths: 'exact',
      matrixParams: 'exact',
      fragment: 'ignored',
      queryParams: 'ignored',
    };

    const isTargetRouteCurrent = isActive(targetUrl, router, config);

    if (isTargetRouteCurrent()) {
      transition.skipTransition();
    }
  },
});

Cet exemple ignore la view transition quand la navigation ne modifie que le fragment de l'URL ou les query parameters (comme les liens d'ancre au sein d'une même page). La méthode skipTransition() empêche l'animation tout en laissant la navigation se terminer.

Respecter les préférences de mouvement de l'utilisateur

Le router exécute les view transitions quel que soit le réglage prefers-reduced-motion de l'utilisateur. Une préférence pour un mouvement réduit ne signifie pas forcément que l'utilisateur ne veut aucun mouvement, le framework laisse donc le choix à l'application : vous pouvez fournir des animations plus discrètes à ces utilisateurs, ou ignorer entièrement la transition avec le callback onViewTransitionCreated :

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      transition.skipTransition();
    }
  },
});

Exemples de l'explainer de Chrome adaptés à Angular

Les exemples suivants illustrent différentes techniques de view transition, adaptées de la documentation de l'équipe Chrome pour être utilisées avec le router Angular :

Les éléments en transition n'ont pas besoin d'être le même élément du DOM

Les éléments peuvent passer en douceur d'un élément du DOM à un autre tant qu'ils partagent le même view-transition-name.

Animations d'entrée et de sortie personnalisées

Créez des animations uniques pour les éléments qui entrent dans le viewport ou en sortent pendant les transitions de route.

Mises à jour asynchrones du DOM et attente du contenu

Le router Angular privilégie les transitions immédiates plutôt que l'attente du chargement de contenu supplémentaire.

Explainer de Chrome

Note : Le router Angular ne fournit aucun moyen de retarder les view transitions. Ce choix de conception évite que les pages deviennent non interactives pendant l'attente de contenu supplémentaire. Comme le souligne la documentation de Chrome : « Pendant ce temps, la page est figée, les délais doivent donc être réduits au minimum… dans certains cas, il vaut mieux éviter complètement le délai et utiliser le contenu dont vous disposez déjà. »