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.
<ph type="x-smartling-placeholder">
</ph>
Transitions créées avec l'API View Transition. Essayez le site de démonstration. Nécessite Chrome 111 ou une version ultérieure.

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 de vue d'un 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.

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Source

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.

<ph type="x-smartling-placeholder">
</ph>
Enregistrement de la démonstration sur les fiches. Nécessite Chrome 111 ou une version ultérieure.

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.

Navigateurs pris en charge

  • Chrome: 126 <ph type="x-smartling-placeholder">
  • Edge: 126 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

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 ce faire, 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.

<ph type="x-smartling-placeholder">
</ph>
Enregistrement de la démonstration de Stack Navigator Nécessite Chrome 126 ou une version ultérieure.

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