Dzisiaj chcielibyśmy opowiedzieć więcej o tym, jak Chrome i Astro korzystają z interfejsu View Transitions API. Dotyczy to m.in. tego, jak społeczność Astro szybko przyjęła interfejs API i z nim eksperymentowała, pokazując szerszej społeczności jego możliwości. Chcielibyśmy też opowiedzieć Ci więcej o nowej wbudowanej obsłudze przejść między widokami w Astro 3.0.
Tło
Płynne przejścia między różnymi stanami strony, czyli przejścia między stanami,zawsze były skomplikowanym aspektem tworzenia płynnych, animowanych efektów w internecie. Pomimo dostępności narzędzi takich jak przejścia CSS, animacje CSS i interfejs Web Animation API tworzenie przejść stanów nadal jest trudnym zadaniem. Jednym z wyzwań jest obsługa interakcji z elementami wychodzącymi, co może skomplikować przejścia.
Ponadto trudno jest utrzymać pozycję podczas czytania i skupić się na treściach na urządzeniach wspomagających. Poza tym obsługa różnic w pozycji przewijania utrudnia przejścia między stanami. Wszystkie te czynniki wpływają na złożoność implementacji płynnych przejść między różnymi elementami na stronie internetowej.
Interfejs View Transitions API okazał się rozwiązaniem tych problemów w przypadku przeglądarek. Ten nowy interfejs API ułatwia zmianę DOM w jednym kroku podczas tworzenia animowanego przejścia między 2 stanami.
Wprowadzenie interfejsu View Transitions API w wersji Chrome 111 zapoczątkowało szerszą wizję obsługi przejść w przypadku wszystkich witryn, a nie tylko aplikacji internetowych opartych na języku JavaScript. W przyszłości wprowadzimy też kolejne ulepszenia. W przyszłości Chrome może oferować ciekawe dodatki, takie jak przejścia między dokumentami, animacje obsługiwane przez kompozytor, przejścia ograniczone i zagnieżdżone grupy przejść.
Otwórz wersję demonstracyjną: Na żywo, Źródło
Wczesne eksploracje z przejściami
Wdrożenie interfejsu View Transitions API w Chrome nie było samotną podróżą. Opinie i współpraca deweloperów, autorów frameworków i grupy roboczej CSS odegrały kluczową rolę w kształtowaniu tej funkcji na przestrzeni kilku lat.
Na początku kluczową rolę odegrały eksperymenty deweloperów. W najwcześniejszych wersjach interfejsu API nie było obsługi animacji CSS, a przejścia były ograniczone do kilku wstępnie ustawionych wzorców. Z pierwszych opinii wynikało, że deweloperzy chcą mieć pełną możliwość dostosowywania i wyrażania siebie za pomocą przejść. Dzięki tej współpracy udało się zaprojektować interfejs API z odpowiednimi domyślnymi wartościami, możliwością rozszerzania i dostosowywania.
Astro było jedną z tych platform, które wcześnie korzystały z przejść między widokami. Pozostała część tego artykułu została napisana z poziomu zespołu Astro i opowiada o ich doświadczeniach związanych z odnalezieniem, wdrożeniem i umieszczeniem w centrum uwagi procesu tworzenia stron internetowych przejścia View Transitions.
Dlaczego Astro postawił na przejścia między widokami
Astro od dawna szukał czegoś takiego jak przejścia między widokami. Astro to framework internetowy w JavaScript, który na serwerze renderuje komponenty interfejsu użytkownika do lekkiego kodu HTML, aby przyspieszyć wczytywanie stron. Astro celowo przenosi jak najwięcej pracy na urządzenie klienta. Witryny Astro korzystają z natywnej nawigacji w przeglądarce, podczas gdy inne frameworki internetowe mogą przekierowywać nawigację w przeglądarce za pomocą kierowania po stronie klienta w JavaScript.
Ta kompromisowa sytuacja stworzyła wyzwanie dla zespołu Astro: jak sprawić, aby Astro animowało przejścia między stronami i zapewniało trwałość interfejsu użytkownika na różnych stronach bez stosowania przekierowywania po stronie klienta?
Odpowiedzią na to były widoczne przejścia. Dzięki przejściom widoku usługa Astro mogła oferować te same funkcje routingu, które zapewniają frameworki internetowe SPA oparte na JavaScriptzie, ale bez obciążenia wydajności i złożoności routingu po stronie klienta. Inne frameworki traktowały przejścia widoku jako opcjonalny szczegół implementacji, ale w przypadku Astro było to coś znacznie większego.
Kolejne pytanie, na które zespół Astro musiał znaleźć odpowiedź, brzmiało: „Jak?”. W poszukiwaniu inspiracji zespół zajrzał do projektów takich jak Turbo, Swup i Livewire, a nawet stworzył w Astro kilka prototypów podobnych rozwiązań.
Jednym z pierwszych podejść było użycie „inteligentnego przejścia” na całej stronie, które automatycznie porównywało każdą nową stronę HTML z bieżącą wersją HTML, a potem próbowało zastąpić wszystkie elementy naraz za pomocą JavaScriptu. Było to sprytne, ale podatne na błędy.
// 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ż potężny, a nie skomplikowany. Po obejrzeniu kilku wczesnych wersji demonstracyjnych zespół Astro zdecydował się na prosty interfejs API Astro, który miał być jak najbardziej zbliżony do interfejsów API przeglądarek. Zamiast wyświetlania przejść między widokami jako niewidocznych szczegółów implementacji ukrytych w Astro, można je wyświetlać bezpośrednio deweloperowi. bezpośrednie dopasowanie Astro do platformy internetowej i zmniejszenie ogólnej złożoności interfejsu;
---
// 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>
<!-- ... -->
Zadania sprowadzały się do prostego wdrożenia nowego interfejsu View Transitions API w Astro i zapewnienia automatycznych rozwiązań alternatywnych, które będą działać w jak największej liczbie witryn i przeglądarek. Obsługa zastępcza jest niezbędna, ponieważ większość przeglądarek (poza Chrome) nie obsługuje jeszcze w pełni natywnych przejść między widokami.
Uruchomienie oficjalnej pomocy w Astro
W wersji Astro 2.9 udostępniono eksperymentalną obsługę przejść między widokami. Odpowiedź była natychmiast pozytywna. Deweloperzy zaczęli udostępniać niesamowite wersje demonstracyjne wielu różnych przypadków użycia, a w niektórych przypadkach nawet wprowadzać je do produkcji.
Otwórz wersję demonstracyjną: Na żywo, Źródło
Astro 3.0, kończy wsparcie i odznacza nowy interfejs View Transitions API dla wszystkich. Możesz teraz stosować te nowe interfejsy API eksperymentalnie lub od razu.
<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ą korzyścią z dostosowania Astro do interfejsów API platformy jest możliwość eksperymentowania z tworzeniem nowych funkcji na podstawie natywnego interfejsu View Transitions API. Na przykład nowa dyrektywa Astro transition:persist umożliwia zachowanie dowolnego elementu w całości nawigacji po stronie. Umożliwia to tworzenie elementów długotrwałych, takich jak trwałe odtwarzacze audio i wideo, co wcześniej było możliwe tylko w przypadku dużych aplikacji SPA w 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>
Otwórz wersję demonstracyjną: Na żywo, Źródło
Astro jest też bezpłatny, aby przejścia między widokami były bardziej ergonomiczne dla dewelopera. Na przykład zespół dodał już obsługę niestandardowych animacji wstecz i do przodu oraz animacji dla dynamicznego HTML. Obie te funkcje trudno jest zrealizować tylko przy użyciu interfejsów API niskiego poziomu, ale w Astro są one praktycznie bezproblemowe.
Te funkcje są obecnie dostępne tylko w Astro, ale zespół Astro ma nadzieję, że jego doświadczenia zostaną przekazane autorom specyfikacji i grupom roboczym, aby w przyszłości ulepszać przeglądarkę. Na przykład przez ścisłe monitorowanie oferty, aby ułatwić udostępnianie animacji w usługach porównywania cen.
Co się dzieje później?
Przejścia w formie obejrzenia mają przed sobą świetlaną przyszłość w internecie. Astro, Nuxt i HTMX oferują pewien stopień obsługi, a wiele innych wyraziło zainteresowanie.
Zespół Chrome jest zachwycony obsługą przejścia między widokami wbudowaną w Astro. Jest to duży krok naprzód w rozwoju stron internetowych, ponieważ umożliwia płynniejsze i bardziej dynamiczne wrażenia użytkowników. Deweloperzy, zachęcamy do zapoznania się z przechodami między widokami w Astro 3.0. Niezależnie od tego, czy tworzysz nowe strony docelowe, czy ulepszasz istniejące, te ulepszenia mogą zmienić wszystko. Przejścia między widokami pomogły wypełnić lukę między tym, co było możliwe w przypadku SPA i MPA. Chcielibyśmy się dowiedzieć, czy występują dodatkowe luki w obsługiwanych przez Chrome SPA lub MPA. Aby dowiedzieć się więcej, możesz dodać komentarz do repozytorium projektu View Transitions na GitHubie WICG.
Jesteśmy już zainspirowani innowacyjnymi demonstracjami i aplikacją, które widzieliśmy, i z niecierpliwością czekamy na więcej. Twoja praca nad przejściami widoku kształtuje przyszłość internetu. Wypróbuj przejścia między widokami w Astro, podziel się swoją pracą i wspólnie kontynuujmy tę podróż.