Transitions de vues CSS : Une nouvelle façon simple d'animer votre site web

Dans cet article, nous explorons une nouvelle fonctionnalité d'animation CSS en cours de déploiement, connue sous le nom de CSS View Transitions. Nous verrons comment les CSS View Transitions permettent d'ajouter facilement des animations fluides et attrayantes à n'importe quel site WordPress ou WooCommerce.

La semaine dernière, nous avons assisté à WordCamp Cape Town 2023 en Afrique du Sud. La communauté locale WordPress a été à la hauteur avec des conférenciers inspirants, une nourriture délicieuse et des vues à couper le souffle ! Nous avons assisté à des conférences fantastiques données par des leaders d'opinion locaux, couvrant tout ce que l'on peut espérer entendre lors d'un WordCamp. Nous avons notamment entendu de magnifiques histoires sur la façon dont les gens ont créé leur entreprise avec WordPress, sur la façon dont WordPress a changé leur vie, ainsi que de nombreuses idées sur l'édition et le commerce électronique. L'une des présentations les plus marquantes a été celle sur les transitions de vue en CSS par Schalk Venter.

Intitulé L'avenir de l'animation sur le webIl s'agit d'un film nostalgique sur l'histoire de l'Europe. récapitulation des débuts de l'internet, de son évolution et de son état actuel. En réfléchissant aux technologies du passé, telles que Flash et Lightspeed ont mis en évidence nos progrès et les changements importants que le web a subis. L'exposé a également mis l'accent sur la simplicité et la puissance de Transitions d'affichage CSS que j'ai trouvé super excitant et qui mérite d'être partagé avec vous puisqu'il peut facilement être ajouté à n'importe quelle site de l'événement.

Que sont les transitions d'affichage CSS ?

Les transitions de vue CSS sont une nouvelle API a été introduite pour améliorer les animations web, en facilitant la création de transitions fluides entre les différents états d'une page web. Cette fonctionnalité permet aux développeurs de définir des transitions entre différentes vues ou éléments d'une page sans avoir recours à un code JavaScript complexe ou à un codage manuel de l'animation.

La vidéo suivante montre comment les transitions entre les pages et les éléments peuvent être ajoutées à un site web standard WordPress et WooCommerce. Lors de la transition entre les pages, la nouvelle page apparaît en fondu tandis que l'ancienne page disparaît en fondu. Lors du filtrage de la page des produits, les éléments portant le même nom de transition s'animeront jusqu'à leur nouvelle position. Tout ceci est réalisé en utilisant seulement quelques lignes de CSS !

Principales caractéristiques des transitions d'affichage CSS

• Syntaxe déclarative : Définissez les transitions directement dans votre CSS sans avoir recours à JavaScript.
• Prise en charge multi-navigateurs : Pris en charge par la plupart des navigateurs modernes, la prise en charge de Firefox étant prévue prochainement.
• Optimisation des performances : Les transitions sont optimisées pour la performance, offrant une expérience plus fluide à l'utilisateur.

Exemple de base

Ce qui rend les CSS View Transitions si intéressantes, c'est la facilité avec laquelle elles peuvent être appliquées à votre site. Par exemple, il suffit d'ajouter le CSS suivant à votre site pour que le navigateur s'estompe de manière transparente entre les chargements de page, créant instantanément une expérience plus fluide, plus proche de celle d'une application.

@view-transition { navigation : auto ; }

Animer des éléments spécifiques

Vous pouvez ensuite aller plus loin et animer un élément entre deux chargements de page en spécifiant le nom de l'élément. Par exemple, le code suivant créera un effet de transition pour la vignette d'un article dont l'ID est #post-1234. La vignette s'animera élégamment de la page de liste des articles à la page d'affichage des articles, le tout en utilisant une seule ligne de code.

#post-1234 .wp-post-image { view-transition-name : item-1 }

Prise en charge des navigateurs et état des normes

L'API est encore assez expérimentale et est actuellement prise en charge par les dernières versions de Chrome, Edge, Opera et le navigateur Android. Safari a a manifesté un intérêt positifet il y a un ticket ouvert pour Adoption de Firefox. Nous devons attendre le soutien formel de ces deux derniers navigateurs avant d'utiliser l'API dans un environnement de production.

Cas d'utilisation pratiques pour WordPress et WooCommerce

1. Pages du produit : Améliorez l'expérience de l'utilisateur en animant les images des produits entre les pages de listage et les pages détaillées.
2. Menus de navigation : Créez des transitions fluides entre les différentes sections de votre site web, rendant la navigation plus intuitive et attrayante.
3. Mises à jour du contenu : Animez les modifications de votre contenu, telles que les extraits d'articles de blog ou les images vedettes, afin d'offrir une expérience plus dynamique à vos lecteurs.

Conclusion

Les transitions de vue CSS sont un outil formidable à ajouter à votre kit et je pense que nous allons en voir de plus en plus dans un avenir proche. Elles offrent un moyen simple mais puissant d'améliorer l'expérience de l'utilisateur grâce à des animations fluides et attrayantes. Que vous travailliez sur un blog personnel, un site web professionnel ou une plateforme de commerce électronique, les CSS View Transitions peuvent vous aider à créer une présence web plus soignée et plus interactive.