Interfejs View Transition API umożliwia aktualizowanie DOM w jednym kroku, a także generowanie animowanego przejścia między 2 stanami.
Deweloperzy, w tym ja, często prosili o wprowadzenie tego typu przejść. Udało nam się je zaimplementować w sposób, który zapewnia odpowiedni domyślny wygląd, a zarazem umożliwia rozszerzanie i dostosowywanie. Może to brzmieć jak klepanie się po plecach, ale opinia programistów była kluczowa dla zaprojektowania tej funkcji. Wcześniejszy prototyp tej funkcji był znacznie mniej elastyczny, a użytkownicy (jak Ty?) poświęcający czas na testowanie prototypów i przesyłanie opinii spowodowali, że musieliśmy całkowicie przemyśleć tę kwestię. Dziękujemy!
Aby zapoznać się z tą funkcją i wypróbować demo, zapoznaj się z naszym przewodnikiem. Jeśli uważasz, że coś jest niewystarczająco opisane, skontaktuj się ze mną na Twitterze, Mastodon lub wyślij e-maila.
Interfejs View Transition API jest obecnie dostępny tylko w Chrome, ale można go używać jako stopniowego ulepszenia. Przewodnik zawiera funkcję pomocniczą, której można używać w różnych przeglądarkach, ale animacja będzie działać tylko w przeglądarkach, które obsługują przejścia między widokami.
Tę funkcję opracowaliśmy w ramach grupy roboczej CSS, korzystając z opinii innych producentów przeglądarek i niezależnych firm. Nie wiemy, czy i kiedy inne przeglądarki zaimplementują przejścia widoku. Obserwuj stanowisko Mozilli i stanowisko WebKit w sprawie standardów.
To jeszcze nie koniec.
Funkcja dostępna w Chrome 111 to dopiero pierwsza wersja. Mamy nadzieję, że udało nam się już znaleźć wszystkie błędy, ale prosimy o zgłaszanie znalezionych problemów na stronie crbug.com, najlepiej z użyciem skróconego demonstracyjnego pliku. Jeśli nie czujesz się z tym komfortowo, skontaktuj się ze mną na Twitterze, Mastodon lub wyślij e-maila. Chętnie Ci pomogę.
Ta wersja jest małą, ale mam nadzieję, przydatną częścią większej całości. Zarysowaliśmy już pewne rozszerzenia tej funkcji, aby zapewnić zgodność wysyłanych dziś części z tymi, które będą dostępne w przyszłości.
Oto nasza propozycja. Nie są one uporządkowane według priorytetów (chociaż pierwszy z nich jest dla wielu osób najważniejszy), dlatego chcielibyśmy poznać Twoją opinię na temat tego, które dodatki są dla Ciebie najważniejsze.
Przejścia między dokumentami
To jest funkcja, nad którą większość deweloperów chce, abyśmy pracowali. Mamy dobrą wiadomość: już nad nią pracujemy.
Interfejs View Transitions API został zaprojektowany tak, aby działał w przypadku dokumentów z tego samego źródła. Jedyną różnicą jest to, że zamiast startViewTransition sygnalizującego zmianę stanu DOM, zmianę tę będzie sygnalizować sama nawigacja.
Prototyp tego rozwiązania znajduje się pod flagą chrome://flags/#view-transition-on-navigation. Oto bardzo proste demo i bardziej złożone demo.
Aby to zrobić, musimy ustalić, jak każda strona zareaguje na przejście. Obecnie używamy metatagu <meta name="view-transition" content="same-origin">, ale uważamy, że usługa porównywania cen jest lepszym miejscem na to. Chcemy też ułatwić Ci ustalanie, z jakiej strony pochodzisz, bez konieczności pisania kodu JavaScript.
Przed nami jeszcze dużo pracy, a chcielibyśmy, aby wszystko było zrobione dobrze, a nie szybko. Jest to dla nas priorytetem.
Animacje sterowane przez kompozytor
Domyślnie animacja szerokości i wysokości w grupach przejść jest łatwiejsza do dostosowania, dlatego zdecydowaliśmy się na nią w tych grupach. Oznacza to jednak, że animacja działa w głównym wątku, co nie jest idealne, zwłaszcza podczas wczytywania strony.
Planujemy wykrywać domyślne animacje i popularne opcje dostosowywania, a następnie interpretować je jako animacje obsługiwane przez kompozytor, aby zwiększyć wydajność.
Przejścia w zakresie
Obecnie przejścia SPA są ograniczone do całego dokumentu i jedno przejście może być uruchomione jednocześnie. Chcemy wprowadzić funkcję, która pozwoli ograniczyć zakres przejść do konkretnego elementu, tak aby wiele komponentów strony mogło uruchamiać przejścia niezależnie.
Dzięki temu umieszczony odtwarzacz wideo mógłby używać przejść między widokami w tym samym czasie co umieszczony widżet czatu.
Zagnieżdżone grupy przejść
Obecnie wszystkie ::view-transition-group są braćmi lub siostrami. Jest to często korzystne, ponieważ pozwala na przejście z jednego kontenera do drugiego i nie musisz się martwić o przycinanie.
Czasami jednak chcesz, aby widok był przycięty przez element nadrzędny, który może też być zaangażowany w przejście.
Chcemy zbadać opcję, która umieszcza określony ::view-transition-group w innym ::view-transition-group.
Klasy przejść
Każdy element view-transition-name musi być niepowtarzalny. W ten sposób możemy stwierdzić, że dany element jest „ten sam” w sensie koncepcyjnym po obu stronach zmiany w DOM, nawet jeśli nie jest to dosłownie ten sam element.
Czasami jednak elementy z różnymi view-transition-name powinny mieć ten sam rodzaj animacji. Obecnie oznacza to dodanie reguły selektora dla każdego view-transition-name.
Chcemy dodać sposób na tworzenie klas przejść, aby umożliwić ominięcie tego ograniczenia.
Ignorowanie elementów poza ekranem
Jeśli nadasz elementowi wartość view-transition-name, będzie on uczestniczyć w przenoszeniu jako własna grupa. Czasami nie jest to jednak idealne. Jeśli np. nadasz nagłówkowi wartość view-transition-name, a potem przewiniesz stronę w dół o 2000 pikseli, aby przejść od stanu, w którym jesteś od niego oddalony o 2000 pikseli, do stanu na górze strony, nagłówek będzie animowany od 2000 pikseli, co wydaje się nieprawidłowe pod względem czasu.
Zamiast tego chcemy dodać opcję, w której element będzie ignorowany, tak jakby nie miał view-transition-name, jeśli znajduje się całkowicie poza widocznym obszarem.
Można to już zrobić za pomocą JavaScriptu, ustawiając dynamicznie style.viewTransitionName, ale wydaje się, że powinno istnieć deklaracyjne rozwiązanie.
animacje sterowane za pomocą metody requestAnimationFrame,
Możesz już tworzyć animacje przejścia za pomocą JavaScriptu za pomocą interfejsu API animacji internetowych, ale czasami trzeba sterować poszczególnymi klatkami za pomocą requestAnimationFrame.
Możesz to zrobić, ale jest to trochę nietypowe. Tutaj możesz obejrzeć prezentację z kilkoma pomocnymi narzędziami. Chcemy, aby nie było to możliwe.
Składa się on z 2 części. Po pierwsze, udostępniając interfejs API, który wskazuje, kiedy animacja się zakończy. Po drugie, przez udostępnienie JavaScriptowi dostępu do pseudoelementów. Druga część może być dość czasochłonna, ale wydaje się, że warto ją wykonać.
Teraz czas na tworzenie świetnych przejść między widokami.
Mam nadzieję, że tak jak ja, jesteś podekscytowany obecną i przyszłą wersją tej funkcji. Jeśli masz jakieś uwagi lub chcesz pochwalić się stworzonymi przez siebie przejściami między widokami, które są płynne i funkcjonalne albo po prostu zwyczajnie śmieszne, skontaktuj się ze mną na Twitterze lub na Mastodon.