Data publikacji: 16 maja 2024 r.
Podczas konferencji Google I/O 2024 ogłosiliśmy kolejny krok w rozwoju przejść między widokami: przejścia między widokami w różnych dokumentach w przypadku aplikacji wielostronicowych (MPA).
Oprócz tego udostępniliśmy kilka ulepszeń, które ułatwiają pracę z przejściami widoku.
- Udostępnianie stylów animacji między pseudoelementami przejścia widoku za pomocą
view-transition-class
. - Selektywna zmiana widoku z aktywnymi typami.
Te ulepszenia dotyczą zarówno przejść między widokami tego samego dokumentu w przypadku aplikacji na jednej stronie (SPA), jak i przejść między widokami różnych dokumentów w przypadku aplikacji wielostronnych (MPA).
Przejścia między widokami w dokumentach w przypadku aplikacji wieloplatformowych
W Chrome 111 zespół Chrome wprowadził przejścia w tym samym dokumencie w przypadku aplikacji jednostronicowych, które zostały dobrze przyjęte przez społeczność twórców stron internetowych.
Cieszymy się, że tak wielu z Was korzysta z przejść między widokami. Od typowych implementacji, które „przekształcają miniaturę w duże zdjęcie”, po bardzo spersonalizowane wrażenia, takie jak te z Airbnb. Super!
Jednak początkowa implementacja wymagała utworzenia aplikacji SPA, aby można było używać przejść między widokami. W wersji 126 Chrome nie jest to już konieczne, ponieważ przejścia między widokami są domyślnie włączone w przypadku nawigacji w ramach tego samego źródła. Możesz teraz utworzyć przejście między 2 dokumentami z tego samego źródła.
Aby umożliwić przejścia między widokami dokumentów, obie strony muszą wyrazić na to zgodę. Aby to zrobić, użyj reguły at @view-transition
i ustaw deskryptor navigation
na auto
.
@view-transition {
navigation: auto;
}
Przejścia między widokami w różnych dokumentach korzystają z tych samych elementów i zasad co przejścia między widokami w tym samym dokumencie. Elementy z aplikowanym view-transition-name
są przechwytywane, a animacji możesz dostosować za pomocą animacji CSS.
Aby dostosować przejścia między dokumentami, użyj zdarzeń pageswap
i pagereveal
, które dają Ci dostęp do obiektu przejścia widoku.
- Dzięki
pageswap
możesz w ostatniej chwili wprowadzić zmiany na stronie wychodzącej tuż przed utworzeniem starych zrzutów stanu. - Za pomocą funkcji
pagereveal
możesz dostosować nową stronę, zanim zacznie się ona renderować po zainicjowaniu.
W obu przypadkach masz dostęp do obiektu NavigationActivation
, aby spersonalizować przejście do widoku dokumentów na podstawie starych i nowych wpisów w historii miejsc docelowych lub typu nawigacji.
Na koniec możesz zaczekać na wczytanie treści z blokowaniem renderowania i polecić wstępne renderowanie, aby skrócić czas wczytywania przed przejściem do widoku.
Prezentacja
Ten prezentacja nawigatora stosu łączy wszystkie te funkcje (oraz kilka ulepszeń).
pagereveal
na podstawie informacji o aktywacji nawigacji. Używana jest też prerenderyzacja.To MPA z nawigacją między dokumentami hostowanymi w tej samej domenie. Gdy używasz parametru pagereveal
, typ animacji jest określany na podstawie starych i nowych wpisów w historii miejsca docelowego.
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
// Determine animation type based on the old/new history entries
const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
document.documentElement.dataset.transition = transitionClass;
// Cleanup after transition ran
await e.viewTransition.finished;
delete document.documentElement.dataset.transition;
}
});
Przeczytaj dokumentację
Więcej informacji o aktywowaniu i dostosowywaniu przejść między widokami dokumentów znajdziesz w dokumentacji dotyczącej przejść między widokami dokumentów.
Wyświetlanie ulepszeń dotyczących przenoszenia
Oprócz udostępnienia przejść między dokumentami w przypadku MPA Chrome zawiera też kilka ulepszeń dotyczących ogólnego działania przejść.
Te ulepszenia dotyczą zarówno przejść między widokami tego samego dokumentu w przypadku aplikacji SPA, jak i przejść między widokami różnych dokumentów w przypadku aplikacji MPA.
Udostępnianie stylów animacji użytkownikowi view-transition-class
Browser Support
Do tej pory, aby animować wiele migawek w taki sam sposób, trzeba było je osobno kierować na każdy element, powtarzając pseudoselektor dla każdego elementu, który ma unikalny identyfikator view-transition-name
.
Dzięki view-transition-class
możesz teraz dodawać nazwę udostępnioną do wszystkich zrzutów. Użyj tej nazwy wspólnej w pseudoselektorze, aby kierować reklamy na wszystkie pasujące migawki. Dzięki temu selektory są znacznie prostsze, a ich działanie jest automatycznie dostosowywane do większej liczby elementów.
#cards-wrapper > div {
view-transition-class: card;
}
html::view-transition-group(.card) {
animation-timing-function: var(--bounce);
}
W tym przykładzie kart użyto view-transition-class
, aby zastosować ten sam czas trwania animacji do wielu migawek za pomocą jednego selektora.
view-transition-class
można zastosować te same animation-timing-function
do wszystkich kart, z wyjątkiem dodanych lub usuniętych.Aby dowiedzieć się więcej o view-transition-class
, zapoznaj się z dokumentacją na temat view-transition-class
.
Selektywna zmiana widoku z aktywnymi typami
Browser Support
Kolejnym ulepszeniem przejść między widokami jest wprowadzenie typów przejść podczas ich rejestrowania i wykonywania. Ułatwia to pracę z różnymi przejściami na tej samej stronie bez konieczności zmiany deklaracji.
Jeśli na przykład przechodzisz do następnej lub poprzedniej strony w sekwencji po stronie, możesz użyć różnych animacji w zależności od tego, czy przechodzisz do strony wyższej, czy niższej w sekwencji.
Przed wprowadzeniem aktywnych typów można było dodawać klasy do DOM i reagować na nie w CSS. Po zakończeniu przenoszenia musisz jednak też wyczyścić dane.
Dzięki przejściom między widokami możesz uzyskać ten sam efekt, a dodatkową korzyścią jest automatyczne usuwanie tych typów po zakończeniu przejścia. Typy są stosowane tylko podczas rejestrowania lub wykonywania przejścia.
Aby przeprowadzić przejście do widoku tego samego dokumentu, przekaż types
do metody startViewTransition
, która przyjmuje teraz obiekt. update
to funkcja wywołania zwrotnego, która aktualizuje DOM, a types
to sekwencja ciągów znaków.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
}););
W przypadku przejścia do widoku w różnych dokumentach ustaw typy w regułach at @view-transition
, używając deskryptora types
, lub ustaw je na bieżąco w zdarzeniach pageswap
i pagereveal
.
@view-transition {
navigation: auto;
types: slide, forwards;
}
Po ustawieniu typów możesz reagować na te typy w arkuszu CSS za pomocą selektorów pseudoklas :active-view-transition-type()
i :active-view-transition
, które mają zastosowanie do katalogu przejścia widoku.
/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-left;
}
&::view-transition-new(content) {
animation-name: slide-in-from-right;
}
}
Więcej informacji o typach przejść między widokami znajdziesz w dokumentacji dotyczącej przejść między widokami w tym samym dokumencie i przejść między widokami w różnych dokumentach.
Prześlij opinię
Zawsze chętnie przyjmujemy opinie deweloperów. Aby to zrobić, prześlij zgłoszenie do grupy roboczej CSS na GitHubie, podając sugestie i pytania. Dodaj do problemu prefiks [css-view-transitions]
.
Jeśli napotkasz błąd, zgłoś go w Chromium.