Dzisiaj chcemy powiedzieć więcej o tym, jak Chrome i Astro korzystały z interfejsu View Transitions API. Pokazuje to, jak społeczność Astro na wczesnym etapie wdrożyła interfejs API i eksperymentowała z nim, podkreślając możliwości dla szerszej społeczności. Cieszymy się też, że możemy przekazać więcej informacji o nowej, wbudowanej obsłudze przejścia w trybie widoku w Astro 3.0.
Wprowadzenie
Płynne przejścia między różnymi stanami strony, tzw. przejścia poszczególnych stanów,zawsze były złożonym aspektem tworzenia płynnych, animowanych treści w internecie. Pomimo dostępności takich narzędzi jak przejścia CSS, animacje CSS oraz interfejs Web Animation API, tworzenie przejść stanów w dalszym ciągu jest trudnym zadaniem. Jednym z wyzwań jest obsługa interakcji z elementami wychodzącymi, co może znacznie utrudnić proces przejścia.
Trudno jest też utrzymać pozycję czytania i koncentrację na urządzeniach wspomagających. A radzenie sobie z różnicami w położeniu przewijania sprawia, że przenoszenie stanów bywa uciążliwe. Wszystkie te czynniki wpływają na złożoność procesu płynnego przejścia między różnymi elementami strony internetowej.
Interfejs View Transitions API pojawił się jako rozwiązanie dla przeglądarek, które sprosta tym wyzwaniom. Ten nowy interfejs API ułatwia zmianę DOM w jednym kroku oraz tworzenie animowanego przejścia między dwoma stanami.
Wprowadzenie interfejsu View Transitions API w Chrome 111 zapoczątkowało szerszą wizję obsługi przejścia we wszystkich witrynach, a nie tylko w aplikacjach internetowych opartych na języku JavaScript. Przygotowujemy też kolejne ulepszenia. Chrome może korzystać z ekscytujących dodatków, takich jak przejścia w dokumentach, animacje oparte na kompozytorach, przejścia o zakresie i zagnieżdżone grupy przejść.
Odwiedź prezentację: na żywo, źródło
Wczesne eksploracje z przejściami między widokami
Przygoda Chrome z interfejsem View Transitions API nie była samotna. Opinie i współpraca ze strony deweloperów, autorów platform i grupy roboczej ds. usług porównywania cen odegrały kluczową rolę w kształtowaniu tej funkcji przez kilka lat.
Eksperymenty deweloperów odegrały kluczową rolę na wczesnym etapie rozwoju. Najwcześniejsze wersje interfejsu API nie obsługiwały animacji CSS, a przejścia były ograniczone do kilku restrykcyjnych gotowych ustawień. Z wczesnych opinii wynika, że deweloperzy chcą, aby przejścia były w pełni dostosowywane i ekspresyjne. Dzięki tej współpracy i wzajemnej współpracy interfejs API został zaprojektowany z zachowaniem równowagi między dobrymi ustawieniami domyślnymi, elastycznością i możliwością dostosowania.
Astro było jednym z tych platform, które już wcześnie zaczęły korzystać z funkcji przejścia w trybie widoku. Pozostała część tego artykułu przedstawia perspektywę zespołu Astro i przedstawia swoje doświadczenie w wyszukiwaniu, wdrażaniu i wdrażaniu efektów przejścia na stronę w centrum uwagi w zakresie tworzenia stron internetowych.
Dlaczego Astro stawia na przejścia widoku
Astro od dawna szukał czegoś takiego jak przejścia w widoku widoku. Astro to platforma internetowa JavaScript, która renderuje komponenty interfejsu użytkownika w formie prostego kodu HTML, aby przyspieszyć wczytywanie stron. Astro celowo usuwa z urządzenia klienta jak najwięcej zadań. Witryny Astro używają natywnej nawigacji po stronie w przeglądarce, gdzie inne platformy internetowe mogą przejmować nawigację w przeglądarce, korzystając z routingu po stronie klienta w języku JavaScript.
Ten porozumienie stworzyło wyzwanie dla zespołu Astro: jak Astro może animować przejścia stron i zapewnić trwałość UI na stronach bez konieczności stosowania routingu po stronie klienta?
Odpowiedzie na to pytanie. Dzięki widokom przejścia Astro może zapewnić te same funkcje routingu, które były dostępne w obfitych w JavaScript platformy SPA z obsługą JavaScriptu, ale bez kosztów i złożoności związanych z routingiem po stronie klienta. Inne platformy traktowały przejście w trybie widoku jako opcjonalny element implementacji, ale w przypadku Astro było to coś dużo większego.
Kolejne pytanie, na które zespół Astro musi odpowiedzieć, brzmi: „jak?”. Zespół szukał inspiracji w projektach takich jak Turbo, Swup i Livewire, a nawet opracował prototypy kilku podobnych rozwiązań w Astro.
Jedną z najwcześniejszych prób było zastosowanie „inteligentnego przejścia” na całą stronę, które automatycznie porównuje każdą nową stronę kodu HTML z obecnym kodem HTML, a następnie próbuje zastąpić wszystkie elementy naraz za pomocą JavaScriptu. Było to pomysłowe, ale było ryzykowne.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Na szczęście społeczność Astro pokazała, że interfejs View Transitions API jest już skuteczny i nie komplikuje go nadmiernie. Po obejrzeniu kilku wczesnych wersji demonstracyjnych zespół Astro został sprzedany na pomysł prostego Astro API, który mógłby możliwie jak najwierniej odpowiadać interfejsom API przeglądarek. Przejścia widoku nie są widoczne jako niewidoczny szczegóły implementacji ukryte w Astro, ale można je bezpośrednio pokazać deweloperowi. Dopasowanie Astro bezpośrednio do platformy internetowej i zmniejszenie ogólnej złożoności frontendu.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Praca stała się prosta: trzeba wprowadzić do Astro nowy interfejs View Transitions API i zapewnić automatyczne reklamy zastępcze, które będą stosowane w jak największej liczbie witryn i przeglądarek. Obsługa zastępcza jest niezbędna, ponieważ większość przeglądarek (innych niż Chrome) nie zapewniła jeszcze pełnej obsługi natywnych przejść do przenoszenia widoku.
Oficjalne wprowadzenie pomocy w Astro
Firma Astro udostępniła eksperymentalną obsługę przejścia widoku w Astro 2.9. Odpowiedź od razu była pozytywna. Deweloperzy zaczęli udostępniać niesamowite wersje demonstracyjne wielu różnych przypadków użycia, a w niektórych przypadkach nawet przesyłać je do produkcji.
Odwiedź prezentację: na żywo, źródło
Astro 3.0 kończy obsługę nowego interfejsu View Transitions API i usuwa oznaczenie flagami dla wszystkich użytkowników. Nowe interfejsy API są już gotowe do wdrożenia – eksperymentalne lub całkowicie naraz.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Nieoczekiwaną zaletą dostosowania Astro do interfejsów API platformy jest możliwość eksperymentowania z tworzeniem nowych funkcji oprócz natywnego interfejsu View Transitions API. Na przykład nowa dyrektywa Astro transition:persist sprawia, że dowolny element pozostaje taki sam podczas nawigacji na całej stronie. Pozwalają one wykorzystać długotrwałe elementy, takie jak trwałe odtwarzacze audio i wideo, które wcześniej były możliwe tylko w przypadku zaawansowanych aplikacji SPA w języku JavaScript.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Odwiedź prezentację: na żywo, źródło
Astro może też bezpłatnie zwiększyć ergonomię funkcji przejścia w trybie widoku dla programistów. Zespół dodał już na przykład obsługę niestandardowych animacji do przodu i do tyłu oraz animacji w dynamicznym kodzie HTML. Korzystanie z obu tych funkcji jest trudne do wykonania tylko przy użyciu interfejsów API niższego poziomu, ale w Astro są one praktycznie bezproblemowe.
Funkcje te są obecnie dostępne tylko w Astro, ale zespół Astro ma nadzieję, że w przyszłości przekażą swoje doświadczenie autorom specyfikacji i grupom roboczym, aby w przyszłości możliwe ulepszenia przeglądarek. Możesz na przykład dokładnie monitorować ofertę pakietową, aby ułatwić udostępnianie animacji w CSS.
Co się dzieje później?
Przyszłość przejścia w trybie widoku jest wspaniała. Astro, Nuxt i HTMX zapewniły jakiś poziom wsparcia, a wielu innych wykazało zainteresowanie.
Zespół Chrome jest bardzo zadowolona z oferowanej przez Astro natywnej obsługi funkcji View Transitions. To duży krok w dziedzinie tworzenia stron internetowych, który zwiększa płynność i dynamiczne wrażenia użytkowników. Zachęcamy deweloperów do zapoznania się z sekcją Wyświetlanie przejść w Astro 3.0. Niezależnie od tego, czy tworzysz nowe strony docelowe, czy uaktualniasz istniejące witryny, te ulepszenia mogą być rewolucyjne. Funkcja przejścia w ramach funkcji „wyświetlenie” pomogła wypełnić lukę pomiędzy tym, co było możliwe w przypadku aplikacji SPA i MPA. Chętnie dowiemy się, czy istnieje dodatkowe luki w obsłudze SPA lub MPA. Jeśli chcesz dokładniej omówić ten temat, dodaj komentarz do repozytorium WICG Transitions WICG na GitHubie.
Już wcześniej czerpiemy inspirację z pokazanych nam innowacyjnych wersji demonstracyjnych i aplikacji, a niecierpliwie czekamy na kolejne. To, co robisz z przejściami z widoków, kształtuje przyszłość internetu. Wypróbuj przejścia w trybie widoku w Astro, podziel się efektami swojej pracy i kontynuujmy tę podróż razem.