{"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-ansichtsubergange","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/de\/css-view-transitions\/","title":{"rendered":"CSS-Ansichts\u00fcberg\u00e4nge: Eine neue und einfache Art, Ihre Website zu animieren"},"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-Ansichts\u00fcberg\u00e4nge Merkmal Bildgestaltung einer Gl\u00fchbirne\" 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 diesem Beitrag stellen wir eine neue CSS-Animationsfunktion vor, die derzeit eingef\u00fchrt wird, die sogenannten CSS View Transitions. Wir sehen uns an, wie CSS-Ansichts\u00fcberg\u00e4nge das Hinzuf\u00fcgen von sanften, ansprechenden Animationen zu jeder WordPress- oder WooCommerce-Website erleichtern.<\/p>\n<p>Letzte Woche besuchten wir <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Kapstadt 2023<\/a> in S\u00fcdafrika. Die lokale WordPress-Community hat mit inspirierenden Rednern, k\u00f6stlichem Essen und atemberaubenden Aussichten absolut \u00fcberzeugt! Wir haben fantastischen Vortr\u00e4gen von lokalen Vordenkern beigewohnt, die alles abdeckten, was man auf einem WordCamp zu h\u00f6ren hofft. Dazu geh\u00f6rten wunderbare Geschichten dar\u00fcber, wie Menschen ihre Unternehmen mit WordPress aufgebaut haben, wie WordPress ihr Leben ver\u00e4ndert hat, und zahlreiche Einblicke in die Bereiche Publishing und E-Commerce. Ein herausragender Vortrag war ein Vortrag \u00fcber CSS-Ansichts\u00fcberg\u00e4nge von <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=\"Das FooEvents-Team nimmt am Vortrag &quot;CSS View Transitions&quot; auf dem WordCamp Cape Town 2024 teil\" 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>Unter dem Titel <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">Die Zukunft der Animation im Web<\/a>mit einem nostalgischen <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">Rekapitulation<\/a> \u00fcber die Anf\u00e4nge des Internets, seine Entwicklung und seinen heutigen Zustand. Ein R\u00fcckblick auf vergangene Technologien wie <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Blitzlicht<\/a> und Lightspeed zeigte unsere Fortschritte und die bedeutenden Ver\u00e4nderungen, die das Web erfahren hat. Der Vortrag betonte auch die Einfachheit und Kraft der <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">CSS-Ansichts\u00fcberg\u00e4nge<\/a> was ich f\u00fcr super spannend und wert hielt, mit Ihnen zu teilen, da es leicht zu jedem Thema hinzugef\u00fcgt werden kann. <a href=\"https:\/\/www.fooevents.com\/de\/tickets-verkaufen\/\">Veranstaltungsort<\/a>.<\/p>\n<h3><strong>Was sind CSS-Ansichts\u00fcberg\u00e4nge?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">CSS-Ansichts\u00fcberg\u00e4nge sind eine neue API<\/a> wurde eingef\u00fchrt, um Web-Animationen zu verbessern und die Erstellung sanfter \u00dcberg\u00e4nge zwischen verschiedenen Zust\u00e4nden einer Webseite zu erleichtern. Diese Funktion erm\u00f6glicht es Entwicklern, \u00dcberg\u00e4nge zwischen verschiedenen Ansichten oder Elementen auf einer Seite zu definieren, ohne dass komplexes JavaScript oder manuelle Animationscodierung erforderlich ist.<\/p>\n<p>Das folgende Video zeigt, wie Seiten- und Element\u00fcberg\u00e4nge zu einer standardm\u00e4\u00dfigen WordPress- und WooCommerce-Website hinzugef\u00fcgt werden k\u00f6nnen. Beim \u00dcbergang zwischen Seiten wird die neue Seite eingeblendet, w\u00e4hrend die alte Seite ausgeblendet wird. Beim Filtern der Produktseite werden Elemente mit demselben \u00dcbergangsnamen an ihre neue Position animiert. Dies alles wird mit nur wenigen Zeilen CSS erreicht!<\/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>Hauptmerkmale von CSS-Ansichts\u00fcberg\u00e4ngen<\/strong><\/h3>\n<ul>\n<li><strong>Deklarative Syntax:<\/strong> Definieren Sie \u00dcberg\u00e4nge direkt in Ihrem CSS, ohne auf JavaScript zur\u00fcckgreifen zu m\u00fcssen.<\/li>\n<li><strong>Cross-Browser-Unterst\u00fctzung:<\/strong> Unterst\u00fctzt von den meisten modernen Browsern, wobei die Unterst\u00fctzung von Firefox in K\u00fcrze erwartet wird.<\/li>\n<li><strong>Optimierung der Leistung:<\/strong> Die \u00dcberg\u00e4nge sind leistungsoptimiert und sorgen f\u00fcr ein reibungsloseres Nutzererlebnis.<\/li>\n<\/ul>\n<h3><strong>Grundlegendes Beispiel<\/strong><\/h3>\n<p>Was CSS-Ansichts\u00fcberg\u00e4nge so interessant macht, ist, wie einfach sie auf Ihrer Website anzuwenden sind. F\u00fcgen Sie zum Beispiel einfach die folgende CSS-Datei zu Ihrer Website hinzu, damit der Browser nahtlos zwischen den Seitenladungen \u00fcberblendet, was sofort zu einem fl\u00fcssigeren, app\u00e4hnlichen Erlebnis f\u00fchrt.<\/p>\n<pre>@view-transition { navigation: auto; }<\/pre>\n<h3><strong>Bestimmte Elemente animieren<\/strong><\/h3>\n<p>Sie k\u00f6nnen dann einen Schritt weiter gehen und <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">ein Element zwischen den Seitenladungen zu animieren<\/a> indem Sie den Namen des Elements angeben. Der folgende Code erzeugt zum Beispiel einen \u00dcbergangseffekt f\u00fcr die Miniaturansicht eines Beitrags mit der ID #post-1234. Die Miniaturansicht wechselt auf elegante Weise von der Seite mit der Beitragsliste zur Seite mit der Beitragsansicht, und das alles mit einer einzigen Codezeile.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Browser-Unterst\u00fctzung und Status der Standards<\/strong><\/h3>\n<p>Die API ist noch recht experimentell und wird derzeit von den neuesten Versionen von Chrome, Edge, Opera und dem Android-Browser unterst\u00fctzt. Safari hat <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">positives Interesse gezeigt<\/a>und es gibt ein offenes Ticket f\u00fcr <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Firefox-Annahme<\/a>. Wir m\u00fcssen auf die formale Unterst\u00fctzung durch die beiden letztgenannten Browser warten, bevor wir die API in einer Produktionsumgebung einsetzen k\u00f6nnen.<\/p>\n<h3><strong>Praktische Anwendungsf\u00e4lle f\u00fcr WordPress und WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>Produkt-Seiten:<\/strong> Verbessern Sie das Benutzererlebnis durch die Animation von Produktbildern zwischen der Produktliste und den Produktdetailseiten.<\/li>\n<li><strong>Navigations-Men\u00fcs:<\/strong> Schaffen Sie flie\u00dfende \u00dcberg\u00e4nge zwischen verschiedenen Abschnitten Ihrer Website, um die Navigation intuitiver und ansprechender zu gestalten.<\/li>\n<li><strong>Inhaltliche Aktualisierungen:<\/strong> Animieren Sie \u00c4nderungen in Ihren Inhalten, wie z. B. Ausz\u00fcge aus Blogposts oder vorgestellte Bilder, um Ihren Lesern ein dynamischeres Erlebnis zu bieten.<\/li>\n<\/ol>\n<h3><strong>Schlussfolgerung<\/strong><\/h3>\n<p>CSS-Ansichts\u00fcberg\u00e4nge sind ein gro\u00dfartiges Tool, das Sie zu Ihrer Ausr\u00fcstung hinzuf\u00fcgen k\u00f6nnen und von dem ich vermute, dass wir in naher Zukunft viel mehr sehen werden. Sie bieten eine einfache, aber leistungsstarke M\u00f6glichkeit, die Benutzererfahrung durch sanfte, ansprechende Animationen zu verbessern. Ganz gleich, ob Sie an einem pers\u00f6nlichen Blog, einer Unternehmenswebsite oder einer E-Commerce-Plattform arbeiten, CSS View Transitions k\u00f6nnen Ihnen dabei helfen, eine ausgefeilte und interaktive Webpr\u00e4senz zu erstellen.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Zus\u00e4tzliche Ressourcen<\/strong><\/h3>\n<p>Wenn Sie mehr \u00fcber CSS-Ansichts\u00fcberg\u00e4nge erfahren m\u00f6chten, lesen Sie bitte die folgenden Artikel, die weitere technische Details enthalten:<\/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\/de\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}