L'API View Transitions permet au navigateur d'effectuer un fondu enchaîné, un glissement ou une transformation entre deux états visuels, et dans les navigateurs modernes, il le fait sur des chargements de page complets avec une ligne CSS et un attribut HTML. Aucune bibliothèque d'animation n'est en vue, c'est exactement ce qui rend cette recette très sympa.

Allumez-le et nommez les pièces

@view-transition { navigation: auto; }
<img src="/img/card-1.webp" style="view-transition-name: featured-photo" />

Désormais, la même photo sur deux pages est traitée comme la même chose. Le navigateur le déplace entre eux. Ajoutez votre propre timing :

::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 220ms; }

Où s'arrêter

  • Donnez view-transition-name uniquement à une poignée d’éléments au maximum. Chaque élément nommé représente un coût de coordination.
  • Ne nommez jamais un conteneur défilant. Il sautera, et son saut sera beau de la pire des manières.
  • Les interactions qui poussent une URL doivent être animées. Les interactions qui enregistrent des données ne devraient pas le faire. Les transitions ne sont pas pertinentes par rapport à ce qu'un utilisateur doit attendre.
Le navigateur a su rendre une transition plus fluide que le DOM ne le pourrait jamais.

Pris en charge dans 92,9 % des navigateurs actuels, y compris Firefox. Pour le reste, rien ne s'affiche et rien ne se casse : les pages se chargent exactement comme elles l'ont toujours fait, ce qui est exactement ce que fait une bonne amélioration progressive.