Transitions fluides avec l'API View Transition

Bramus

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

Voici quelques cas typiques dans lesquels vous pouvez utiliser des transitions d'affichage:

• Image miniature d'une fiche produit qui devient une 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 à l'autre.
• Grille dont les éléments changent de position à mesure que vous filtrez.

Implémenter des transitions de vue

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

Ces deux types de transition de vue reposent sur les mêmes éléments de base et principes:

1. Le navigateur prend des instantanés de l'ancien et du nouvel état.
2. Le DOM est mis à jour alors que le rendu est supprimé.
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 pour un même document

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

Déclenchement

Déclenchez des 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 fiche suivant est une application monopage qui utilise des transitions de vue d'un même document pour animer les fiches à mesure que de nouvelles cartes sont ajoutées ou supprimées.

Démarrer la création

Pour en savoir plus sur les transitions d'affichage vers un même document, consultez la page de documentation dédiée.

Créer des transitions d'affichage pour un même document

Transitions d'affichage de plusieurs documents

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

Déclenchement

Les transitions d'affichage dans plusieurs documents sont déclenchées par une navigation entre documents d'une même origine si cette fonctionnalité est activée pour les deux pages. En d'autres termes, il n'existe aucune API à appeler pour démarrer une transition de consultation inter-document. Lorsqu'un utilisateur clique sur un lien, ce clic déclenche la transition de vue.

Première activation, utilisez l'extrait CSS suivant:

@view-transition {
  navigation: auto;
}

Exemple

L'exemple de navigateur de pile suivant est un MPA qui utilise des transitions d'affichage entre deux documents différents. Selon que vous allez plus loin dans la navigation ou non, les pages sont poussées dans la pile ou ressortent.

Démarrer la création

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

Créer des transitions d'affichage entre plusieurs documents