Transitions fluides avec l'API View Transition

Bramus

L'API View Transitions vous permet de créer des transitions visuelles fluides entre différentes vues sur votre site Web. Cela crée une expérience utilisateur plus attrayante visuellement 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 typiques où vous pouvez utiliser les transitions de vue :

• Vignette sur une page de fiche produit qui se transforme en image de produit 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 avec des éléments qui changent de position lorsque 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écifiques. Elles peuvent être déclenchées sur un seul document ou entre deux documents différents.

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

1. Le navigateur prend des instantanés des anciens et nouveaux états.
2. Le DOM est mis à jour lorsque le rendu est supprimé.
3. Les transitions sont alimentées par les animations CSS.

La seule différence entre les deux types de notifications 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. Les transitions de vue dans le même document sont prises en charge dans Chrome à partir de la version 111.

Comment déclencher

Déclenchez une transition 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 dans le même document pour animer les cartes lorsqu'elles sont ajoutées ou supprimées.

Démarrer la création

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

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

Transitions de vue entre les documents

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

Comment déclencher

Les transitions de vue entre documents sont déclenchées par une navigation multi-documents de même origine, si les deux pages ont activé cette fonctionnalité. 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, le clic déclenche la transition de vue.

Pour l'activer, 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 en sont retirées.

Démarrer la création

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

Créer des transitions de vue entre les documents