{"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":"css-weergave-overgangen","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/nl\/css-view-transitions\/","title":{"rendered":"CSS-weergaveovergangen: Een nieuwe en eenvoudige manier om uw website te animeren"},"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-weergaveovergangen Afbeeldingontwerp van een gloeilamp\" 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\">In deze post verkennen we een nieuwe CSS-animatiefunctie die momenteel wordt uitgerold, bekend als CSS View Transitions. We bekijken hoe CSS View Transitions het eenvoudig maken om vloeiende, aantrekkelijke animaties toe te voegen aan elke WordPress- of WooCommerce-site.<\/p>\n<p>Vorige week woonden we <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Kaapstad 2023<\/a> in Zuid-Afrika. De lokale WordPress community heeft absoluut geleverd met inspirerende sprekers, heerlijk eten en een adembenemend uitzicht! We woonden fantastische lezingen bij van lokale thought leaders, over alles wat je hoopt te horen op een WordCamp. Deze omvatten prachtige verhalen over hoe mensen hun bedrijven opgebouwd met WordPress, hoe WordPress hun leven veranderd, en tal van inzichten rond het publiceren en e-commerce. Een opvallende presentatie was een lezing over CSS View Transitions door <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=\"FooEvents team aanwezig bij de CSS View Transitions talk op WordCamp Kaapstad 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>Getiteld <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">De toekomst van animatie op het web<\/a>Het bevatte een nostalgische <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">recap<\/a> over het begin, de evolutie en de huidige staat van het internet. Reflecteren op technologie\u00ebn uit het verleden zoals <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> en Lightspeed benadrukten onze vooruitgang en de grote veranderingen die het web heeft ondergaan. De lezing benadrukte ook de eenvoud en kracht van <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">CSS-weergaveovergangen<\/a> wat ik super spannend vond en de moeite waard om met jullie te delen omdat het gemakkelijk kan worden toegevoegd aan elke <a href=\"https:\/\/www.fooevents.com\/nl\/tickets-verkopen\/\">evenemententerrein<\/a>.<\/p>\n<h3><strong>Wat zijn CSS-weergaveovergangen?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">CSS-weergaveovergangen zijn een nieuwe API<\/a> ge\u00efntroduceerd om webanimaties te verbeteren, waardoor het gemakkelijker wordt om vloeiende overgangen te maken tussen verschillende toestanden van een webpagina. Met deze functie kunnen ontwikkelaars overgangen defini\u00ebren tussen verschillende weergaven of elementen op een pagina zonder ingewikkelde JavaScript of handmatige animatiecodering.<\/p>\n<p>De volgende video demonstreert hoe pagina- en elementovergangen kunnen worden toegevoegd aan een standaard WordPress en WooCommerce website. Bij het overgaan tussen pagina's, zal de nieuwe pagina vervagen terwijl de oude pagina vervaagt. Bij het filteren van de productenpagina, zullen items met dezelfde transitienaam animeren naar hun nieuwe positie. Dit wordt allemaal bereikt met slechts een paar regels 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>Belangrijkste functies van CSS-weergaveovergangen<\/strong><\/h3>\n<ul>\n<li><strong>Declaratieve syntaxis:<\/strong> Definieer overgangen direct in je CSS zonder veel gebruik te maken van JavaScript.<\/li>\n<li><strong>Browseroverschrijdende ondersteuning:<\/strong> Ondersteund door de meeste moderne browsers en ondersteuning voor Firefox wordt binnenkort verwacht.<\/li>\n<li><strong>Prestatieoptimalisatie:<\/strong> Overgangen zijn geoptimaliseerd voor prestaties en zorgen voor een soepelere gebruikerservaring.<\/li>\n<\/ul>\n<h3><strong>Basisvoorbeeld<\/strong><\/h3>\n<p>Wat CSS View Transitions zo spannend maakt, is hoe eenvoudig het is om ze toe te passen op je site. Als je bijvoorbeeld simpelweg de volgende CSS aan je site toevoegt, zal de browser naadloos overgaan tussen pagina's. Dit zorgt direct voor een soepelere, meer app-achtige ervaring.<\/p>\n<pre>@view-overgang {navigatie: auto; }<\/pre>\n<h3><strong>Specifieke elementen animeren<\/strong><\/h3>\n<p>Je kunt dan nog een stap verder gaan en <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animeer een item tussen pagina loads<\/a> door de naam van het item op te geven. De volgende code maakt bijvoorbeeld een overgangseffect voor een miniatuur van een bericht met een ID van #post-1234. De miniatuur zal elegant animeren van de pagina met de lijst met berichten naar de pagina met de berichten, allemaal met behulp van een enkele regel code.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Browserondersteuning en standaardenstatus<\/strong><\/h3>\n<p>De API is nog vrij experimenteel en wordt momenteel ondersteund door de nieuwste versies van Chrome, Edge, Opera en de Android Browser. Safari heeft <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">positieve interesse getoond<\/a>en er is een open ticket voor <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Firefox-gebruik<\/a>. We moeten wachten op formele ondersteuning van deze laatste twee browsers voordat we de API in een productieomgeving kunnen gebruiken.<\/p>\n<h3><strong>Praktische gebruikssituaties voor WordPress en WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>Productpagina's:<\/strong> Verbeter de gebruikerservaring door productafbeeldingen te animeren tussen de pagina met productvermeldingen en de pagina met productdetails.<\/li>\n<li><strong>Navigatiemenu's:<\/strong> Maak vloeiende overgangen tussen verschillende secties van je website, zodat de navigatie intu\u00eftiever en aantrekkelijker wordt.<\/li>\n<li><strong>Inhoudelijke updates:<\/strong> Animeer veranderingen in je inhoud, zoals uittreksels van blogartikelen of uitgelichte afbeeldingen, om je lezers een dynamischere ervaring te bieden.<\/li>\n<\/ol>\n<h3><strong>Conclusie<\/strong><\/h3>\n<p>CSS View Transitions zijn een geweldig hulpmiddel om aan je pakket toe te voegen en ik vermoed dat we er in de nabije toekomst nog veel meer van zullen zien. Ze bieden een eenvoudige maar krachtige manier om de gebruikerservaring te verbeteren door middel van vloeiende, aantrekkelijke animaties. Of je nu werkt aan een persoonlijke blog, een zakelijke website of een e-commerce platform, CSS View Transitions kunnen je helpen om een meer gepolijste en interactieve webaanwezigheid te cre\u00ebren.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Aanvullende bronnen<\/strong><\/h3>\n<p>Als je meer wilt lezen over CSS View Transitions, bekijk dan de volgende artikelen met meer technische details:<\/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\/nl\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/nl\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}