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.
L’article de CSS-Tricks présente sept exemples concrets de view transitions, une fonctionnalité CSS moderne permettant d’animer les changements de vue entre pages ou éléments. L’auteur explique d’abord le principe de base, notamment l’activation via la règle @view-transition et l’utilisation de types d’animations personnalisés, tout en respectant les préférences de réduction de mouvement des utilisateurs. Il détaille ensuite la structure technique pour appliquer des animations entrantes et sortantes via des pseudo-éléments comme ::view-transition-old(root) et ::view-transition-new(root).
L’article propose des recettes prêtes à l’emploi, comme l’effet pixelate dissolve qui combine flou et fondu pour une transition visuelle originale. Chaque exemple inclut le code nécessaire et des explications sur leur implémentation, avec une attention particulière portée à la compatibilité navigateur (tous les principaux navigateurs supportent désormais les view transitions, bien que certaines animations puissent varier). L’auteur encourage à expérimenter ces techniques pour enrichir l’expérience utilisateur tout en restant accessible aux débutants.
Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.
L'auteur présente des démos des possibilités de l'API View Transition : elle permet d'améliorer graphiquement le passage d'une page à l'autre en rendant la transition moins abrupte. Il s'agit d'un argument en moins pour la création d'une Single Page Application.
L'article soutient que les fonctionnalités modernes du CSS, telles que l'API View Transitions et les Speculation Rules, ont éliminé les principaux avantages des Single Page Applications (SPAs). Ces innovations permettent des transitions fluides entre les pages, une navigation instantanée et de meilleures performances sans la complexité et la surcharge de JavaScript associées aux SPAs. Alderson argue que les navigateurs modernes peuvent désormais gérer des expériences riches et fluides de manière native, rendant obsolètes les SPAs pour la plupart des sites web. Il encourage les développeurs à utiliser le rendu côté serveur, des pages réelles, des animations CSS et à réduire l'usage de JavaScript pour construire des sites web plus performants et maintenables.
Il s'agit d'une façon plus fine d'utiliser les Cross-Document View Transitions, qui permettent de faire des effets de transition quand on passe d'une page à une autre via un clic.
Suite de https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/ l'auteur explique et démontre des utilisations de la View Transitions API pour faire des effets de transitions, notamment lors de changement de pages (avec un tuto pour React).
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
L'auteur montre cette nouvelle API pour faire des transitions entre pages.