Un site en transition

Un jour, je prendrais le temps d’expliquer mes choix de couleurs et de polices, mon travail de taxonomie des articles, mes tentatives de mise en page des articles et tout le toutim. En attendant, je ne peux pas résister à l’envie de parler des View Transitions… et de titrer avec un mauvais jeu de mots¹.

Imaginée par Jake Archibald lorsqu’il travaillait pour Google, cette nouvelle API de la « plateforme web » permet de relier deux vues par une transition, à l’intérieur d’une application monopage (SPA) ou d’une page web à l’autre. Vous n’avez pas besoin d’une seule ligne de code JavaScript pour activer les transitions, mais simplement d’une simple balise meta :

<meta name="view-transition" content="same-origin">

Les pages se chargent avec une animation de « dissolution » (si vous êtes plutôt Keynote) ou de « fondu enchainé » (si vous êtes plutôt PowerPoint). Les transitions s’appliquent uniquement aux pages d’un même site, l’ouverture d’un lien externe est marquée par le chargement habituel. Plutôt que la page entière, vous pouvez animer des éléments spécifiques en leur donnant le même view-transition-name dans votre feuille de style :

.home .page {
  view-transition-name: page;
}

.single .page {
  view-transition-name: page;
}

Le nom des transitions doit être unique, ce qui pose problème lorsque plusieurs éléments possèdent la même classe, comme (au hasard) dans une liste d’articles sur la page d’accueil d’un blog. Dave Rupert propose d’utiliser l’identifiant de l’article, nécessairement unique, pour initialiser une variable CSS. J’ai ainsi codé quelque chose comme cela :

<div class="pages">
  {{ range .Site.RegularPages }}
    <a class="page" href="{{ .Permalink }}" style="--name: {{ .Params.Slug }}">{{ .Params.Title }}</a>
  {{ end }}
</div>

Pour ensuite reprendre la variable dans la feuille de style :

.home .page {
  view-transition-name: var(--name);
}

.single .page {
  view-transition-name: var(--name);
}

La grille de la page d’accueil prend tout son sens lorsqu’elle semble se déplier pour ouvrir l’article :

Je ne l’avais pas anticipé, mais cette transition donne l’impression de filtrer les articles lorsque l’on passe de la page d’accueil aux pages de catégories. Voilà qui m’a convaincu d’abandonner la soupe de JavaScript que je n’ai jamais réussi à fluidifier comme je l’aurais voulu, parce que la transition fait illusion :

Puisque chaque transition projette un pseudo-élément dans l’arbre DOM, vous pouvez modifier son comportement avec quelques lignes de CSS. Cela peut être utile pour régler des problèmes de calage lorsque la taille ou l’alignement des éléments change d’une page à l’autre :

/* Contrôler la sortie de la première page */
::view-transition-old(title) {
  object-fit: contain
}

/* Contrôler l’entrée de la nouvelle page */
::view-transition-new(title) {
  object-fit: cover
}

La transition « racine » appliquée à la page tout entière n’est pas désactivée lorsque des éléments spécifiques sont animés, ce qui peut entrainer des clignotements lorsque les transitions se superposent. Là encore toutefois, ce problème peut être réglé en quelques lignes de CSS, comme l’explique Jeremy Keith :

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
	display: block;
	mix-blend-mode: normal;
}

Toutes ces animations pourraient coller la nausée aux personnes souffrant de cinétose, aussi mieux vaut-il les désactiver lorsque la requête prefers-reduced-motion est présentée :

@media (prefers-reduced-motion: reduce) {
  .home .page,
  .single .page {
    view-transition-name: none;
  }
}

View Transitions est disponible dans la version stable de Chrome pour les SPA et dans la version de développement Chrome Canary pour les sites conventionnels. Pour le moment, il faut activer des flags pour activer cette nouvelle API :

chrome://flags#view-transition
chrome://flags#view-transition-on-navigation

Ces flags peuvent déjà être activés dans Arc, mon navigateur favori, mais ne devraient pas être disponibles dans la version stable de Chrome et ses dérivés avant la mi-juillet. Apple et Mozilla n’ont pas (encore ?) implémenté View Transitions, mais cela ne doit pas vous arrêter. Les transitions ne coutent rien aux anciens navigateurs, mais apparaitront au fur et à mesure de leur prise en charge par les nouveaux navigateurs, l’exemple parfait d’une amélioration progressive.