Co nowego w przejściach widoku? (aktualizacja Google I/O z 2024 roku)

Bramus

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 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.
• Selektywne przejścia 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 plików MPA

W Chrome 111 zespół Chrome wprowadził przejścia w widoku tego samego dokumentu w przypadku aplikacji jednostronicowych, które spotkały się z bardzo dobrym przyjęciem w środowisku 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 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 dwoma różnymi dokumentami pochodzącymi z tego samego źródła.

Aby umożliwić przejścia między widokami w różnych dokumentach, obie strony muszą wyrazić na to zgodę. Aby to zrobić, użyj reguły @view-transition i ustaw deskryptor navigation na auto.

@view-transition {
  navigation: auto;
}

Przejścia między widokiem tego samego dokumentu są oparte na tych samych elementach składowych i zasadach co przejścia między widokami tego samego dokumentu. Przechwytywane są elementy z zastosowaną etykietą view-transition-name. Możesz dostosować animacje za pomocą animacji CSS.

Aby dostosować przejścia między widokami w dokumentach, użyj zdarzeń pageswap i pagereveal, które dają Ci dostęp do obiektu przejścia między widokami.

• Dzięki pageswap możesz w ostatniej chwili wprowadzić zmiany na stronie wychodzącej tuż przed utworzeniem starych zrzutów stanu.
• Dzięki funkcji pagereveal możesz dostosować nową stronę przed jej wyrenderowaniem po zainicjowaniu.

W obu przypadkach masz dostęp do obiektu NavigationActivation, aby spersonalizować przejście do widoku w dokumencie 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ń).

To jest MPA z nawigacją w różnych dokumentach, hostowany w tym samym źródle. 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 na temat przejść między widokami dokumentów.

Zobacz ulepszenia procesów 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ępnij style animacji w usłudze view-transition-class

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. W efekcie powstają znacznie prostsze selektory, które automatycznie skalują się od jednego do kilku elementów.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

W przykładzie poniżej użyto elementu view-transition-class, aby za pomocą jednego selektora zastosować ten sam czas animacji do wielu zrzutów.

Aby dowiedzieć się więcej o view-transition-class, zapoznaj się z dokumentacją na temat view-transition-class.

Selektywne przejścia widoku z aktywnymi typami

Kolejnym ulepszeniem przejść między widokami jest wprowadzenie możliwości dodawania typów do przejść podczas ich rejestrowania i wykonywania. Ułatwia to pracę z różnymi przejściami na tej samej stronie bez konieczności zmiany deklaracji.

Gdy na przykład przechodzisz na następną lub poprzednią stronę w sekwencji podziału na strony, możesz używać różnych animacji w zależności od tego, czy przejdziesz na wyższą czy na niższą stronę 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 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 w tym samym dokumencie, 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-rule w komponencie @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 tego samego dokumentu i przejść między widokami różnych dokumentów.

Prześlij opinię

Opinie deweloperów są dla nas bardzo ważne. 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.