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 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

Obsługa przeglądarek

  • Chrome: 126.
  • Edge: 126.
  • Firefox: nieobsługiwane.
  • Safari Technology Preview: obsługiwane.

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 w Airbnb. Super!

Przejście do widoku tego samego dokumentu w Airbnb.

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 w różnych dokumentach, obie strony muszą wyrazić 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 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 temu możesz dostosować nową stronę przed jej wyrenderowaniem po zainicjowaniu.pagereveal

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

Nagranie prezentacji Stack Navigator. Używa ona przejść między widokami dokumentów, które są dostosowywane w zdarzeniu 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 na temat 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ólnej obsługi 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

Obsługa przeglądarek

  • Chrome: 125.
  • Edge: 125.
  • Firefox: nieobsługiwane.
  • Safari: 18.2.

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 i automatycznie dostosowują się 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 elementu view-transition-class, aby zastosować ten sam czas trwania animacji do wielu migawek za pomocą jednego selektora.

Nagranie prezentacji kart. Za pomocą 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

Obsługa przeglądarek

  • Chrome: 125.
  • Edge: 125.
  • Firefox: nieobsługiwane.
  • Safari: 18.

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.

Jeśli na przykład przechodzisz do następnej lub poprzedniej strony w sekwencji podzielonej na strony, możesz użyć różnych animacji w zależności od tego, czy przechodzisz do strony wyższej czy niższej w sekwencji.

Nagranie prezentacji strony Typy określają, której animacji użyć. Style są rozdzielane w arkuszu stylów dzięki aktywnym typom przejść.

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 składniku @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 głównego elementu 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ę

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.