L’article explore les défis liés à la mise à l’échelle des View Transitions entre documents, notamment pour des pages affichant des centaines d’éléments comme une grille de produits. Après avoir résolu les problèmes initiaux (métadonnées obsolètes, délais de timeout, etc.), l’auteur souligne que les tutoriels classiques, conçus pour des transitions simples, échouent face à des cas complexes. La solution idéale, purement CSS, reposerait sur des fonctions comme ident() et sibling-index() pour générer automatiquement des noms uniques, mais cette approche n’est pas encore implémentée dans les navigateurs.
En attendant, les développeurs doivent recourir à des méthodes manuelles fastidieuses, comme des règles CSS répétitives pour chaque élément, ce qui devient ingérable avec un grand nombre d’items. L’article met en lumière l’écart entre les promesses futures des standards CSS et les contraintes actuelles, tout en soulignant l’importance de solutions évolutives pour des interfaces dynamiques.
L’article aborde les difficultés rencontrées avec les Cross-Document View Transitions, une fonctionnalité permettant d’animer les transitions entre pages HTML classiques sans framework. L’auteur explique que les tutoriels obsolètes, utilisant une balise <meta> désormais dépréciée, induisent en erreur, tandis que les solutions pour Single-Page Applications (SPA) ne s’appliquent pas aux sites multi-pages. Les problèmes courants incluent des transitions silencieusement bloquées par un délai de 4 secondes, des distorsions d’images ou des styles CSS complexes pour gérer les noms de transitions.
L’auteur souligne l’absence de documentation claire et actualisée, rendant l’implémentation ardue malgré des démos prometteuses. Il annonce une série en deux parties pour clarifier les bonnes pratiques, comme l’utilisation de l’API @view-transition en CSS, la gestion des événements pagereveal et pageswap, ou encore l’optimisation des noms de transitions pour éviter des fichiers CSS surchargés. La seconde partie promet des solutions pour les projets à grande échelle, notamment la gestion des animations avec prefers-reduced-motion.