{"id":187095,"date":"2024-08-06T06:07:21","date_gmt":"2024-08-06T13:07:21","guid":{"rendered":"https:\/\/www.fooevents.com\/?p=187095"},"modified":"2024-08-07T00:42:05","modified_gmt":"2024-08-07T07:42:05","slug":"transitions-de-vue-css","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/fr\/css-view-transitions\/","title":{"rendered":"Transitions de vues CSS : Une nouvelle fa\u00e7on simple d'animer votre site web"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-187148\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png\" alt=\"CSS View Transitions Feature image design of a lightbulb (en anglais)\" width=\"1024\" height=\"667\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-300x195.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-768x500.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-18x12.png 18w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-512x333.png 512w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"blog-intro\">Dans cet article, nous explorons une nouvelle fonctionnalit\u00e9 d'animation CSS en cours de d\u00e9ploiement, connue sous le nom de CSS View Transitions. Nous verrons comment les CSS View Transitions permettent d'ajouter facilement des animations fluides et attrayantes \u00e0 n'importe quel site WordPress ou WooCommerce.<\/p>\n<p>La semaine derni\u00e8re, nous avons assist\u00e9 \u00e0 <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Cape Town 2023<\/a> en Afrique du Sud. La communaut\u00e9 locale WordPress a \u00e9t\u00e9 \u00e0 la hauteur avec des conf\u00e9renciers inspirants, une nourriture d\u00e9licieuse et des vues \u00e0 couper le souffle ! Nous avons assist\u00e9 \u00e0 des conf\u00e9rences fantastiques donn\u00e9es par des leaders d'opinion locaux, couvrant tout ce que l'on peut esp\u00e9rer entendre lors d'un WordCamp. Nous avons notamment entendu de magnifiques histoires sur la fa\u00e7on dont les gens ont cr\u00e9\u00e9 leur entreprise avec WordPress, sur la fa\u00e7on dont WordPress a chang\u00e9 leur vie, ainsi que de nombreuses id\u00e9es sur l'\u00e9dition et le commerce \u00e9lectronique. L'une des pr\u00e9sentations les plus marquantes a \u00e9t\u00e9 celle sur les transitions de vue en CSS par <a href=\"https:\/\/www.schalkventer.me\/\" rel=\"nofollow noopener\" target=\"_blank\">Schalk Venter<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-187120 size-large\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg\" alt=\"L&#039;\u00e9quipe de FooEvents participe \u00e0 la pr\u00e9sentation CSS View Transitions au WordCamp Cape Town 2024\" width=\"1024\" height=\"768\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-300x225.jpg 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-768x576.jpg 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1536x1152.jpg 1536w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-2048x1536.jpg 2048w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-16x12.jpg 16w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-512x384.jpg 512w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Intitul\u00e9 <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">L'avenir de l'animation sur le web<\/a>Il s'agit d'un film nostalgique sur l'histoire de l'Europe. <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">r\u00e9capitulation<\/a> des d\u00e9buts de l'internet, de son \u00e9volution et de son \u00e9tat actuel. En r\u00e9fl\u00e9chissant aux technologies du pass\u00e9, telles que <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> et Lightspeed ont mis en \u00e9vidence nos progr\u00e8s et les changements importants que le web a subis. L'expos\u00e9 a \u00e9galement mis l'accent sur la simplicit\u00e9 et la puissance de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Transitions d'affichage CSS<\/a> que j'ai trouv\u00e9 super excitant et qui m\u00e9rite d'\u00eatre partag\u00e9 avec vous puisqu'il peut facilement \u00eatre ajout\u00e9 \u00e0 n'importe quelle <a href=\"https:\/\/www.fooevents.com\/fr\/vendre-des-billets\/\">site de l'\u00e9v\u00e9nement<\/a>.<\/p>\n<h3><strong>Que sont les transitions d'affichage CSS ?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Les transitions de vue CSS sont une nouvelle API<\/a> a \u00e9t\u00e9 introduite pour am\u00e9liorer les animations web, en facilitant la cr\u00e9ation de transitions fluides entre les diff\u00e9rents \u00e9tats d'une page web. Cette fonctionnalit\u00e9 permet aux d\u00e9veloppeurs de d\u00e9finir des transitions entre diff\u00e9rentes vues ou \u00e9l\u00e9ments d'une page sans avoir recours \u00e0 un code JavaScript complexe ou \u00e0 un codage manuel de l'animation.<\/p>\n<p>La vid\u00e9o suivante montre comment les transitions entre les pages et les \u00e9l\u00e9ments peuvent \u00eatre ajout\u00e9es \u00e0 un site web standard WordPress et WooCommerce. Lors de la transition entre les pages, la nouvelle page appara\u00eet en fondu tandis que l'ancienne page dispara\u00eet en fondu. Lors du filtrage de la page des produits, les \u00e9l\u00e9ments portant le m\u00eame nom de transition s'animeront jusqu'\u00e0 leur nouvelle position. Tout ceci est r\u00e9alis\u00e9 en utilisant seulement quelques lignes de CSS !<\/p>\n<div style=\"width: 970px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-187095-1\" width=\"970\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4?_=1\" \/><a href=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4\">https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4<\/a><\/video><\/div>\n<h3><strong>Principales caract\u00e9ristiques des transitions d'affichage CSS<\/strong><\/h3>\n<ul>\n<li><strong>Syntaxe d\u00e9clarative :<\/strong> D\u00e9finissez les transitions directement dans votre CSS sans avoir recours \u00e0 JavaScript.<\/li>\n<li><strong>Prise en charge multi-navigateurs :<\/strong> Pris en charge par la plupart des navigateurs modernes, la prise en charge de Firefox \u00e9tant pr\u00e9vue prochainement.<\/li>\n<li><strong>Optimisation des performances :<\/strong> Les transitions sont optimis\u00e9es pour la performance, offrant une exp\u00e9rience plus fluide \u00e0 l'utilisateur.<\/li>\n<\/ul>\n<h3><strong>Exemple de base<\/strong><\/h3>\n<p>Ce qui rend les CSS View Transitions si int\u00e9ressantes, c'est la facilit\u00e9 avec laquelle elles peuvent \u00eatre appliqu\u00e9es \u00e0 votre site. Par exemple, il suffit d'ajouter le CSS suivant \u00e0 votre site pour que le navigateur s'estompe de mani\u00e8re transparente entre les chargements de page, cr\u00e9ant instantan\u00e9ment une exp\u00e9rience plus fluide, plus proche de celle d'une application.<\/p>\n<pre>@view-transition { navigation : auto ; }<\/pre>\n<h3><strong>Animer des \u00e9l\u00e9ments sp\u00e9cifiques<\/strong><\/h3>\n<p>Vous pouvez ensuite aller plus loin et <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animer un \u00e9l\u00e9ment entre deux chargements de page<\/a> en sp\u00e9cifiant le nom de l'\u00e9l\u00e9ment. Par exemple, le code suivant cr\u00e9era un effet de transition pour la vignette d'un article dont l'ID est #post-1234. La vignette s'animera \u00e9l\u00e9gamment de la page de liste des articles \u00e0 la page d'affichage des articles, le tout en utilisant une seule ligne de code.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name : item-1 }<\/pre>\n<h3><strong>Prise en charge des navigateurs et \u00e9tat des normes<\/strong><\/h3>\n<p>L'API est encore assez exp\u00e9rimentale et est actuellement prise en charge par les derni\u00e8res versions de Chrome, Edge, Opera et le navigateur Android. Safari a <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">a manifest\u00e9 un int\u00e9r\u00eat positif<\/a>et il y a un ticket ouvert pour <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Adoption de Firefox<\/a>. Nous devons attendre le soutien formel de ces deux derniers navigateurs avant d'utiliser l'API dans un environnement de production.<\/p>\n<h3><strong>Cas d'utilisation pratiques pour WordPress et WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>Pages du produit :<\/strong> Am\u00e9liorez l'exp\u00e9rience de l'utilisateur en animant les images des produits entre les pages de listage et les pages d\u00e9taill\u00e9es.<\/li>\n<li><strong>Menus de navigation :<\/strong> Cr\u00e9ez des transitions fluides entre les diff\u00e9rentes sections de votre site web, rendant la navigation plus intuitive et attrayante.<\/li>\n<li><strong>Mises \u00e0 jour du contenu :<\/strong> Animez les modifications de votre contenu, telles que les extraits d'articles de blog ou les images vedettes, afin d'offrir une exp\u00e9rience plus dynamique \u00e0 vos lecteurs.<\/li>\n<\/ol>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>Les transitions de vue CSS sont un outil formidable \u00e0 ajouter \u00e0 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\u00e9liorer l'exp\u00e9rience de l'utilisateur gr\u00e2ce \u00e0 des animations fluides et attrayantes. Que vous travailliez sur un blog personnel, un site web professionnel ou une plateforme de commerce \u00e9lectronique, les CSS View Transitions peuvent vous aider \u00e0 cr\u00e9er une pr\u00e9sence web plus soign\u00e9e et plus interactive.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Ressources compl\u00e9mentaires<\/strong><\/h3>\n<p>Si vous souhaitez en savoir plus sur les transitions de vue CSS, veuillez consulter les articles suivants qui contiennent des d\u00e9tails techniques suppl\u00e9mentaires :<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/github.com\/schalkventer\/css-view-transition-resources<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we explore a new CSS animation feature currently being rolled out, known as CSS View Transitions. We&#8217;ll take a look at how CSS View Transitions make it easy to add smooth, engaging animations to any WordPress or WooCommerce site. Last week, we attended WordCamp Cape Town 2023 in South Africa. The local [&hellip;]<\/p>\n","protected":false},"author":1138,"featured_media":187148,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,53],"tags":[],"class_list":["post-187095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-footips","category-howto"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}