Transitions fluides avec l'API View Transition

L'API View Transition permet de créer des transitions visuelles fluides entre les différentes vues de votre site Web. Cela crée une expérience utilisateur visuellement plus attrayante pour les utilisateurs lorsqu'ils naviguent sur votre site, qu'il s'agisse d'une application multipage (MPA) ou d'une application monopage (SPA).

Voici quelques situations courantes dans lesquelles vous devez utiliser des transitions de vue:

• Vignette sur une fiche produit qui se transforme en image en taille réelle sur la page d'informations détaillées sur le produit.
• Une barre de navigation fixe qui reste en place lorsque vous passez d'une page à une autre
• Grille contenant les éléments qui se déplacent lorsque vous les filtrez.

---

Implémenter des transitions de vue

Les transitions de vue ne sont pas liées à une architecture ou à un framework d'application spécifiques. Elles peuvent être déclenchées non seulement sur un seul document, mais aussi entre deux documents différents.

Les deux types de transition de vue reposent sur les mêmes composants et principes:

1. Le navigateur prend des instantanés de l'ancien et du nouvel état.
2. Le DOM est mis à jour pendant la suppression du rendu.
3. Les transitions sont fournies par des animations CSS.

La seule différence entre les deux types est la façon dont vous les déclenchez.

---

Transitions d'affichage sur le même document

Lorsqu'une transition d'affichage s'exécute sur un seul document, elle est appelée transition de vue sur le même document. C'est généralement le cas dans les applications monopages (SPA). Les transitions d'affichage du même document sont disponibles dans Chrome à partir de Chrome 111.

Déclenchement

Déclenchez les transitions de vue d'un même document en appelant document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Exemple

L'exemple de cartes suivant est une SPA qui utilise des transitions de vue sur un même document pour animer les fiches à mesure que de nouvelles cartes sont ajoutées ou supprimées.

Démarrer la création

Reportez-vous à la page de documentation dédiée pour tout savoir sur les transitions de vue d'un même document.

Créer des transitions de vue sur un même document

---

Transitions d'affichage entre documents

Lorsqu'une transition d'affichage se produit entre deux documents différents, on parle de transition de vue entre documents. C'est typique pour les MPA. Les transitions d'affichage entre documents sont compatibles avec Chrome 126 et les versions ultérieures.

Déclenchement

Les transitions d'affichage entre documents sont déclenchées par une navigation multi-document d'origine identique, si les deux pages sont activées. En d'autres termes, il n'existe aucune API à appeler pour démarrer une transition de vue entre documents. Lorsqu'un utilisateur clique sur un lien, ce clic déclenche la transition d'affichage.

Pour activer la fonctionnalité, utilisez l'extrait CSS suivant:

@view-transition {
  navigation: auto;
}

Exemple

L'exemple Stack Navigator suivant est un MPA qui utilise des transitions de vue entre documents entre deux documents différents. Selon que vous approfondissez ou non la navigation, les pages sont placées dans la pile ou placées dans une fenêtre externe.

Démarrer la création

Découvrez tout ce qu'il faut savoir sur les transitions d'affichage entre documents.

Créer des transitions de vue entre documents