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.