CSS View Transitions: Nowy i łatwy sposób na animowanie strony internetowej

W tym poście zbadamy nową funkcję animacji CSS, która jest obecnie wdrażana, znaną jako CSS View Transitions. Przyjrzymy się, jak CSS View Transitions ułatwiają dodawanie płynnych, angażujących animacji do dowolnej witryny WordPress lub WooCommerce.

W zeszłym tygodniu uczestniczyliśmy w WordCamp Cape Town 2023 w Republice Południowej Afryki. Lokalna społeczność WordPress absolutnie zapewniła inspirujących prelegentów, pyszne jedzenie i zapierające dech w piersiach widoki! Uczestniczyliśmy w fantastycznych prelekcjach lokalnych liderów myśli, obejmujących wszystko, o czym można usłyszeć na WordCampie. Obejmowały one wspaniałe historie o tym, jak ludzie budowali swoje firmy za pomocą WordPress, jak WordPress zmienił ich życie oraz liczne spostrzeżenia dotyczące publikowania i handlu elektronicznego. Jedną z wyróżniających się prezentacji było wystąpienie na temat CSS View Transitions autorstwa Schalk Venter.

Tytuł Przyszłość animacji w sieci, zawierał nostalgiczny podsumowanie o początkach Internetu, jego ewolucji i obecnym stanie. Zastanawiając się nad technologiami z przeszłości, takimi jak Flash i Lightspeed podkreślił nasze postępy i znaczące zmiany, jakie przeszła sieć. Wykład podkreślił również prostotę i moc Przejścia widoku CSS co uważam za bardzo ekscytujące i warte podzielenia się z wami, ponieważ można je łatwo dodać do każdego strona wydarzenia.

Czym są przejścia widoku CSS?

CSS View Transitions to nowy interfejs API wprowadzona w celu ulepszenia animacji internetowych, ułatwiając tworzenie płynnych przejść między różnymi stanami strony internetowej. Funkcja ta pozwala programistom definiować przejścia między różnymi widokami lub elementami na stronie bez konieczności korzystania ze skomplikowanych skryptów JavaScript lub ręcznego kodowania animacji.

Poniższy film pokazuje, w jaki sposób można dodawać przejścia między stronami i elementami do standardowej witryny WordPress i WooCommerce. Podczas przechodzenia między stronami, nowa strona będzie się pojawiać, podczas gdy stara strona będzie zanikać. Podczas filtrowania strony produktów, elementy o tej samej nazwie przejścia będą animowane do nowej pozycji. Wszystko to zostało osiągnięte przy użyciu zaledwie kilku linii CSS!

Kluczowe cechy przejść widoku CSS

• Składnia deklaratywna: Definiowanie przejść bezpośrednio w CSS bez konieczności korzystania z JavaScript.
• Obsługa różnych przeglądarek: Obsługiwany przez większość nowoczesnych przeglądarek, a wkrótce także Firefox.
• Optymalizacja wydajności: Przejścia są zoptymalizowane pod kątem wydajności, zapewniając płynniejsze wrażenia użytkownika.

Podstawowy przykład

To, co sprawia, że CSS View Transitions jest tak ekscytujące, to łatwość, z jaką można je zastosować na swojej stronie. Na przykład, proste dodanie następującego kodu CSS do witryny sprawi, że przeglądarka będzie płynnie zanikać między ładowaniami stron, natychmiast tworząc płynniejsze, bardziej podobne do aplikacji wrażenia.

@view-transition { navigation: auto; }

Animowanie określonych elementów

Następnie można pójść o krok dalej i animowanie elementu między ładowaniami strony określając nazwę elementu. Na przykład poniższy kod utworzy efekt przejścia dla miniatury postu o identyfikatorze #post-1234. Miniatura będzie elegancko animowana ze strony listy postów do strony widoku postów, a wszystko to za pomocą jednej linii kodu.

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

Obsługa przeglądarek i stan standardów

API jest nadal dość eksperymentalne i obecnie obsługiwane przez najnowsze wersje Chrome, Edge, Opera i Android Browser. Safari ma wykazał pozytywne zainteresowaniei jest otwarty bilet na Przyjęcie przeglądarki Firefox. Musimy poczekać na oficjalne wsparcie tych dwóch ostatnich przeglądarek przed użyciem API w środowisku produkcyjnym.

Praktyczne przypadki użycia dla WordPress i WooCommerce

1. Strony produktu: Popraw wrażenia użytkownika, animując obrazy produktów między listą produktów a stronami szczegółów produktu.
2. Menu nawigacji: Twórz płynne przejścia między różnymi sekcjami witryny, dzięki czemu nawigacja będzie bardziej intuicyjna i wciągająca.
3. Aktualizacje treści: Animuj zmiany w treści, takie jak fragmenty postów na blogu lub wyróżnione obrazy, aby zapewnić czytelnikom bardziej dynamiczne wrażenia.

Wnioski

CSS View Transitions to świetne narzędzie, które można dodać do swojego zestawu i podejrzewam, że w najbliższej przyszłości będzie go znacznie więcej. Oferują one prosty, ale potężny sposób na zwiększenie komfortu użytkowania poprzez płynne, angażujące animacje. Niezależnie od tego, czy pracujesz nad osobistym blogiem, witryną biznesową czy platformą e-commerce, CSS View Transitions może pomóc ci stworzyć bardziej dopracowaną i interaktywną stronę internetową.