Afficher les transitions pour les applications monopages

Un schéma courant pour les pages Web consiste à utiliser JavaScript pour remplacer dynamiquement le contenu d'une page, sans charger un nouveau document HTML complet. C'est ce qu'on appelle une application monopage (SPA, Single Page Application). Les transitions de vue vous permettent de montrer la continuité ou le contexte entre les pages de votre SPA.

Transitions de page complète

Lorsque votre utilisateur accède à une nouvelle vue dans votre SPA, votre framework remplace le DOM par un nouveau contenu. Le contenu apparaît simplement. Mais que faire si vous souhaitez fournir une transition entre le contenu actuel et le nouveau contenu ?

Les transitions affichent souvent les anciennes et les nouvelles vues simultanément, par exemple en estompant l'ancienne vue tout en faisant apparaître la nouvelle. Avant les transitions de vue, cela posait problème, car le contenu existant était remplacé.

Pour utiliser les transitions de vue, vous devez encapsuler la logique de modification du DOM dans un rappel. Pour ces exemples, nous disposons d'une implémentation de routeur de base fournie par un composant Web appelé MyRouter. La façon dont vous activez les transitions de vue dépend du routeur et du framework que vous utilisez.

document.startViewTransition(() => updateTheDOMSomehow());

Cela active la transition par défaut, qui estompe l'ancienne vue tout en faisant apparaître la nouvelle.

Que se passe-t-il ici ? Lorsque vous appelez document.startViewTransition(), le navigateur prend un instantané de l'ancienne vue. Il appelle ensuite la fonction de rappel que vous transmettez, ce qui met à jour le DOM avec la nouvelle vue (mais ne l'affiche pas encore). Une fois la fonction de rappel terminée, le navigateur commence la transition vers le nouveau contenu.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Personnaliser la transition

Comme vous l'avez vu dans l'exemple précédent, la transition de vue par défaut estompe l'ancienne vue tout en faisant apparaître la nouvelle. Vous pouvez personnaliser la transition pour mieux l'adapter au style de votre site en stylisant les pseudo-éléments générés par les transitions de vue.

Vous pouvez spécifier la transition de sortie avec ::view-transition-old() et la transition d'entrée avec ::view-transition-new(). Vous pouvez également spécifier des valeurs pour les deux avec ::view-transition-group().

Dans cet exemple, l'ancienne vue disparaît à l'aide de la transition slide-out-to-left et la nouvelle vue apparaît à l'aide de la transition slide-in-from-right. Les deux auront une durée de 200 millisecondes.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Différentes transitions en fonction du contexte

Vous pouvez souhaiter avoir différentes transitions en fonction de ce que fait l'utilisateur. Par exemple, si le fait de cliquer sur un lien depuis votre page d'accueil fait glisser la nouvelle vue depuis la droite, vous vous attendez à ce que le fait de cliquer sur un lien pour revenir à votre page d'accueil fasse glisser la vue de la page d'accueil depuis la gauche.

Vous pouvez spécifier différentes animations à l'aide de la pseudo-classe :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

Vous pouvez ensuite choisir le type de transition de vue à utiliser lorsque vous appelez document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Faire la transition d'éléments spécifiques

Jusqu'à présent, vous n'avez appliqué une transition qu'à l'élément racine pour faire la transition de toute la vue. Toutefois, vous pouvez également utiliser les transitions de vue pour animer des parties spécifiques de vos pages.

Par exemple, il est possible que du contenu de l'ancienne vue corresponde à du contenu de la nouvelle vue. Il peut s'agir du titre du contenu ou d'une image. Il peut même s'agir d'une miniature dans l'ancienne vue et d'une vidéo dans la nouvelle vue.

Vous devez d'abord spécifier les éléments à faire passer en transition à l'aide de la propriété view-transition-name. Pour que les transitions de vue fonctionnent, il doit y avoir exactement un élément pour chaque view-transition-name avant d'appeler document.startViewTransition() et exactement un élément après la fin du rappel dans document.startViewTransition().

Dans cet exemple, un lecteur de musique affiche la pochette de l'album, le titre et l'artiste. Une autre vue montre le même contenu réorganisé, avec l'ajout des paroles de la chanson.

Dans l'exemple précédent, il existe exactement un élément de chaque type dans l'ancienne et la nouvelle vue, et ils partagent même les mêmes sélecteurs. Les éléments en transition semblent se déplacer entre leurs tailles et positions. Les parties de la vue qui ne sont pas en transition apparaissent et disparaissent en fondu.

Examinons un exemple plus complexe. Par exemple, la page d'accueil d'un blog peut afficher un titre et une image pour chaque post, qui sont également présents dans la vue en pleine page d'un post de blog. Lorsque vous passez de la page d'accueil à un post spécifique, vous pouvez faire en sorte que le titre et l'image semblent se déplacer vers leur nouvel emplacement pour fournir du contexte.

Pour ce faire, vous devez avoir un view-transition-name sur l'élément de titre qui est unique dans l'ancienne vue, partagé avec l'élément de titre dans la nouvelle vue et unique dans la nouvelle vue. C'est un défi, car la page d'accueil comporte plusieurs titres et images, et vous ne savez pas sur lequel l'utilisateur cliquera.

Deux options s'offrent à vous pour résoudre ce problème. Vous pouvez choisir d'ajouter un view-transition-name unique pour chaque post sur la page d'accueil, puis faire correspondre ce nom à chaque post en pleine page. Vous pouvez les générer à l'aide de l'ID d'un post. L'autre option consiste à utiliser un view-transition-name générique, mais à ne l'appliquer qu'après que l'utilisateur a cliqué sur un post, mais avant d'appeler document.startViewTransition().

Concevoir des transitions

Les transitions de vue sont un ensemble d'outils que vous pouvez utiliser pour guider vos utilisateurs et fournir des indices supplémentaires sur votre marque ou le contexte. Vous utiliserez probablement plusieurs techniques pour trouver les transitions qui fonctionnent pour votre site.

Selon l'effet recherché, vous devrez peut-être également modifier les éléments ou les animations. Dans l'exemple précédent, plusieurs styles ont été ajustés pour obtenir des transitions fluides.

Le titre est soumis à la règle width: fit-content, qui est un style utile lorsque vous effectuez une transition de texte qui ne passe pas à la ligne (ou qui passe à la ligne de la même manière dans l'ancienne et la nouvelle vue). Sinon, la transition peut se faire entre des éléments de différentes largeurs, ce qui la rendra moins fluide.

Les proportions de l'image sont également différentes dans l'ancienne et la nouvelle vue. L'exemple modifie l'animation et la propriété object-fit pour que la transition semble fluide.

Respecter prefers-reduced-motion

Les utilisateurs demandent souvent à réduire les mouvements, car les animations en plein écran, comme celles qui peuvent être réalisées avec les transitions de vue, peuvent provoquer une gêne chez les personnes souffrant de troubles vestibulaires. Vous pouvez désactiver les animations à l'aide de la requête média prefers-reduced-motion. Vous pouvez également choisir de fournir des animations alternatives plus subtiles, mais qui indiquent toujours comment les éléments sont connectés.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Vérifier que vous avez bien compris