CSS-Ansichtsübergänge: Eine neue und einfache Art, Ihre Website zu animieren

In diesem Beitrag stellen wir eine neue CSS-Animationsfunktion vor, die derzeit eingeführt wird, die sogenannten CSS View Transitions. Wir sehen uns an, wie CSS-Ansichtsübergänge das Hinzufügen von sanften, ansprechenden Animationen zu jeder WordPress- oder WooCommerce-Website erleichtern.

Letzte Woche besuchten wir WordCamp Kapstadt 2023 in Südafrika. Die lokale WordPress-Community hat mit inspirierenden Rednern, köstlichem Essen und atemberaubenden Aussichten absolut überzeugt! Wir haben fantastischen Vorträgen von lokalen Vordenkern beigewohnt, die alles abdeckten, was man auf einem WordCamp zu hören hofft. Dazu gehörten wunderbare Geschichten darüber, wie Menschen ihre Unternehmen mit WordPress aufgebaut haben, wie WordPress ihr Leben verändert hat, und zahlreiche Einblicke in die Bereiche Publishing und E-Commerce. Ein herausragender Vortrag war ein Vortrag über CSS-Ansichtsübergänge von Schalk Venter.

Unter dem Titel Die Zukunft der Animation im Webmit einem nostalgischen Rekapitulation über die Anfänge des Internets, seine Entwicklung und seinen heutigen Zustand. Ein Rückblick auf vergangene Technologien wie Blitzlicht und Lightspeed zeigte unsere Fortschritte und die bedeutenden Veränderungen, die das Web erfahren hat. Der Vortrag betonte auch die Einfachheit und Kraft der CSS-Ansichtsübergänge was ich für super spannend und wert hielt, mit Ihnen zu teilen, da es leicht zu jedem Thema hinzugefügt werden kann. Veranstaltungsort.

Was sind CSS-Ansichtsübergänge?

CSS-Ansichtsübergänge sind eine neue API wurde eingeführt, um Web-Animationen zu verbessern und die Erstellung sanfter Übergänge zwischen verschiedenen Zuständen einer Webseite zu erleichtern. Diese Funktion ermöglicht es Entwicklern, Übergänge zwischen verschiedenen Ansichten oder Elementen auf einer Seite zu definieren, ohne dass komplexes JavaScript oder manuelle Animationscodierung erforderlich ist.

Das folgende Video zeigt, wie Seiten- und Elementübergänge zu einer standardmäßigen WordPress- und WooCommerce-Website hinzugefügt werden können. Beim Übergang zwischen Seiten wird die neue Seite eingeblendet, während die alte Seite ausgeblendet wird. Beim Filtern der Produktseite werden Elemente mit demselben Übergangsnamen an ihre neue Position animiert. Dies alles wird mit nur wenigen Zeilen CSS erreicht!

Hauptmerkmale von CSS-Ansichtsübergängen

• Deklarative Syntax: Definieren Sie Übergänge direkt in Ihrem CSS, ohne auf JavaScript zurückgreifen zu müssen.
• Cross-Browser-Unterstützung: Unterstützt von den meisten modernen Browsern, wobei die Unterstützung von Firefox in Kürze erwartet wird.
• Optimierung der Leistung: Die Übergänge sind leistungsoptimiert und sorgen für ein reibungsloseres Nutzererlebnis.

Grundlegendes Beispiel

Was CSS-Ansichtsübergänge so interessant macht, ist, wie einfach sie auf Ihrer Website anzuwenden sind. Fügen Sie zum Beispiel einfach die folgende CSS-Datei zu Ihrer Website hinzu, damit der Browser nahtlos zwischen den Seitenladungen überblendet, was sofort zu einem flüssigeren, appähnlichen Erlebnis führt.

@view-transition { navigation: auto; }

Bestimmte Elemente animieren

Sie können dann einen Schritt weiter gehen und ein Element zwischen den Seitenladungen zu animieren indem Sie den Namen des Elements angeben. Der folgende Code erzeugt zum Beispiel einen Übergangseffekt für 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.

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

Browser-Unterstützung und Status der Standards

Die API ist noch recht experimentell und wird derzeit von den neuesten Versionen von Chrome, Edge, Opera und dem Android-Browser unterstützt. Safari hat positives Interesse gezeigtund es gibt ein offenes Ticket für Firefox-Annahme. Wir müssen auf die formale Unterstützung durch die beiden letztgenannten Browser warten, bevor wir die API in einer Produktionsumgebung einsetzen können.

Praktische Anwendungsfälle für WordPress und WooCommerce

1. Produkt-Seiten: Verbessern Sie das Benutzererlebnis durch die Animation von Produktbildern zwischen der Produktliste und den Produktdetailseiten.
2. Navigations-Menüs: Schaffen Sie fließende Übergänge zwischen verschiedenen Abschnitten Ihrer Website, um die Navigation intuitiver und ansprechender zu gestalten.
3. Inhaltliche Aktualisierungen: Animieren Sie Änderungen in Ihren Inhalten, wie z. B. Auszüge aus Blogposts oder vorgestellte Bilder, um Ihren Lesern ein dynamischeres Erlebnis zu bieten.

Schlussfolgerung

CSS-Ansichtsübergänge sind ein großartiges Tool, das Sie zu Ihrer Ausrüstung hinzufügen können und von dem ich vermute, dass wir in naher Zukunft viel mehr sehen werden. Sie bieten eine einfache, aber leistungsstarke Möglichkeit, die Benutzererfahrung durch sanfte, ansprechende Animationen zu verbessern. Ganz gleich, ob Sie an einem persönlichen Blog, einer Unternehmenswebsite oder einer E-Commerce-Plattform arbeiten, CSS View Transitions können Ihnen dabei helfen, eine ausgefeilte und interaktive Webpräsenz zu erstellen.