L'API View Transitions : des transitions de page et d'état fluides

L'API View Transitions anime le passage entre deux états d'une page — une liste qui devient une vue détail, un thème qui bascule, un élément qui disparaît d'un filtre — avec presque aucun code d'animation. Le navigateur capture l'ancien état, capture le nouveau, puis effectue un fondu (ou une transformation) entre les deux pour vous.

Transitions same-document

Pour les changements d'état au sein d'une même page — une application monopage qui met à jour le DOM — enveloppez la mise à jour du DOM dans document.startViewTransition() :

function showDetail(item) {
  if (!document.startViewTransition) {
    updateDOM(item); // pas de support : on met à jour sans animation
    return;
  }
  document.startViewTransition(() => updateDOM(item));
}

Le callback effectue votre travail DOM habituel. Le navigateur capture un instantané « avant » juste avant de l'exécuter et un instantané « après » une fois terminé, puis anime entre les deux. Par défaut, c'est un fondu enchaîné fluide — déjà une belle amélioration gratuite.

Personnaliser l'animation en CSS

Pendant une transition, le navigateur construit un arbre de pseudo-éléments stylables. Le point d'accroche le plus simple est le groupe de transition racine :

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

Vous ciblez l'instantané sortant avec ::view-transition-old() et l'entrant avec ::view-transition-new(), puis appliquez l'animation CSS de votre choix.

Animer un élément précis entre deux états

Pour qu'un élément semble se déplacer et se métamorphoser entre les deux états — une vignette qui grandit en image complète — donnez-lui un view-transition-name partagé dans les deux états :

.hero-image {
  view-transition-name: hero;
}

Le nom doit être unique sur la page à tout instant. Quand le navigateur retrouve le même nom avant et après, il interpole directement la position et la taille de cet élément au lieu d'un fondu, produisant un effet « élément partagé » continu.

Transitions cross-document (MPA)

Les sites multipages peuvent aussi animer la transition entre des navigations complètes, sans JavaScript. On l'active depuis le CSS dans les deux pages :

@view-transition {
  navigation: auto;
}

Avec cette seule règle, les navigations same-origin s'animent automatiquement. Des valeurs view-transition-name identiques sur les deux pages permettent à un élément — disons l'image hero d'un article — de se prolonger de la page liste à la page article.

Aide-mémoire

Objectif	API
Changement d'état SPA	document.startViewTransition(cb)
Navigation MPA	@view-transition { navigation: auto }
Styler le fondu	::view-transition-old/new(root)
Élément partagé	view-transition-name (unique)

Support et amélioration progressive

Les transitions same-document sont présentes dans les navigateurs Chromium et Safari ; le support cross-document se déploie et Firefox implémente les deux. Comme vous protégez avec if (!document.startViewTransition) et que la version cross-document est une activation purement CSS, l'API se dégrade en douceur : les navigateurs non compatibles mettent simplement la page à jour sans animation. Elle est donc sûre à adopter dès aujourd'hui en amélioration progressive.

Recourez aux view transitions quand un saut entre états paraît brusque. Un peu de mouvement donne à l'utilisateur un sentiment de continuité — d'où viennent les choses et où elles vont — sans écrire la moindre keyframe à la main dans la plupart des cas.