Transitions fluides avec l'API View Transition

Bramus

L'API View Transition vous 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 des exemples de situations courantes où vous pouvez 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.
• Barre de navigation fixe qui reste en place lorsque vous passez d'une page à une autre.
• Grille dans laquelle les éléments changent de position à mesure que vous 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 transitions 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, tandis que le rendu est supprimé.
3. Les transitions sont basées sur les animations CSS.

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

Transitions de vue dans le même document

Lorsqu'une transition de vue s'exécute sur un seul document, on parle de transition de vue dans le même document. C'est généralement le cas dans les applications monopages (SPA). Les transitions de vue dans le même document sont compatibles avec Chrome à partir de la version 111.

Comment déclencher

Déclenchez des transitions de vue dans le 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

Consultez la page de documentation dédiée pour en savoir plus sur les transitions de vue dans un même document.

Créer des transitions de vue dans le même document

Transitions entre les vues de documents

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

Comment déclencher

Les transitions de vue entre les documents sont déclenchées par une navigation interdocument de même origine, 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 les documents. Lorsqu'un utilisateur clique sur un lien, ce clic déclenche la transition de vue.

Pour activer cette fonctionnalité, utilisez l'extrait de code CSS suivant :

@view-transition {
  navigation: auto;
}

Exemple

L'exemple de Stack Navigator suivant est une MPA qui utilise des transitions de vue entre deux documents différents. Selon que vous approfondissez la navigation ou non, les pages sont ajoutées à la pile ou supprimées.

Démarrer la création

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

Créer des transitions entre les vues de différents documents