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

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

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!

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 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ń).

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

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • 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, 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.

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

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: 18.

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.

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