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

Bramus

Opublikowano: 16 maja 2024 r.

Podczas konferencji Google I/O 2024 ogłosiłem kolejny krok w rozwoju przejść widoku: przejścia widoku między dokumentami w aplikacjach wielostronicowych (MPA).

Oprócz tego przedstawiłem kilka ulepszeń, które ułatwiają ogólne korzystanie z przejść widoku.

• Udostępnianie stylów animacji między pseudoelementami przejścia widoku za pomocą view-transition-class.
• Selektywne przejścia widoku z aktywnymi typami.

Te ulepszenia dotyczą zarówno przejść między widokami w ramach tego samego dokumentu w przypadku aplikacji na jednej stronie (SPA), jak i przejść między widokami w ramach różnych dokumentów w przypadku aplikacji wielostronicowych (MPA).

Przejścia między widokami dokumentów w przypadku aplikacji MPA

W Chrome 111 zespół Chrome wprowadził przejścia widoku w tym samym dokumencie w przypadku aplikacji jednostronicowych, czyli funkcję, która została dobrze przyjęta przez społeczność twórców stron internetowych.

Cieszymy się, że wielu z Was korzysta z przejść między widokami. Od typowych implementacji, w których „miniatura powiększa się do dużego zdjęcia”, po wysoce spersonalizowane, wciągające funkcje, takie jak ta od Airbnb. Super!

Początkowa implementacja wymagała jednak utworzenia aplikacji SPA, aby można było korzystać z przejść widoku. Od Chrome 126 nie jest to już prawdą. Przejścia widoku są teraz domyślnie włączone w przypadku nawigacji w obrębie tej samej domeny. Możesz teraz utworzyć przejście widoku między dwoma różnymi dokumentami pochodzącymi z tego samego źródła.

Aby włączyć przejścia między dokumentami, 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 widokami w różnych dokumentach wykorzystują te same elementy i zasady co przejścia między widokami w tym samym dokumencie. Elementy z zastosowanym atrybutem view-transition-name są przechwytywane i możesz dostosowywać animacje za pomocą animacji CSS.

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

• Dzięki pageswap możesz wprowadzić ostatnie zmiany na stronie wychodzącej tuż przed zrobieniem starych migawek.
• Za pomocą pagereveal możesz dostosować nową stronę przed rozpoczęciem renderowania po jej zainicjowaniu.

W obu zdarzeniach masz dostęp do obiektu NavigationActivation, który umożliwia dostosowanie przejścia do widoku między dokumentami na podstawie starych i nowych wpisów w historii miejsca docelowego lub typu nawigacji.

Dodatkowo możesz poczekać na wczytanie treści za pomocą blokowania renderowania i skorzystać z wstępnego renderowania, aby skrócić czas wczytywania przed uruchomieniem przejścia widoku.

Prezentacja

Ten tryb demo nawigatora stosu łączy wszystkie te funkcje (wraz z ulepszeniami).

Jest to aplikacja wielostronicowa z nawigacją między dokumentami, hostowana w tej samej domenie. W przypadku użycia pagereveal typ animacji jest określany na podstawie starych i nowych wpisów w historii miejsc docelowych.

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 aktywacji i dostosowywaniu przejść między widokami w różnych dokumentach znajdziesz w naszej dokumentacji dotyczącej przejść między widokami w różnych dokumentach.

Ulepszenia przejść

Oprócz obsługi przejść między widokami w przypadku aplikacji wielostronicowych Chrome zawiera też kilka ulepszeń dotyczących ogólnego korzystania z przejść między widokami.

Te ulepszenia dotyczą zarówno przejść między widokami w tym samym dokumencie w przypadku aplikacji SPA, jak i przejść między widokami w różnych dokumentach w przypadku aplikacji MPA.

Udostępnianie stylów animacji użytkownikowi view-transition-class

Do tej pory, aby animować wiele migawek w ten sam sposób, trzeba było kierować reklamy na każdą z nich z osobna, powtarzając jej pseudoselektor dla każdego elementu, który ma unikalny atrybut view-transition-name.

Dzięki view-transition-class możesz teraz dodać wspólną nazwę do wszystkich zrzutów. Użyj tej wspólnej nazwy w pseudoselektorach, aby kierować reklamy na wszystkie pasujące migawki. Dzięki temu selektory są znacznie prostsze i automatycznie skalują się od jednego do wielu elementów.

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

W przykładzie poniższych kart użyto view-transition-class, aby zastosować ten sam czas trwania animacji do wielu migawek za pomocą jednego selektora.

Więcej informacji o view-transition-class znajdziesz w dokumentacji na temat view-transition-class.

Selektywne przejścia widoku z aktywnymi typami

Kolejnym ulepszeniem przejść widoku jest wprowadzenie możliwości dodawania typów do przejścia widoku podczas jego przechwytywania i wykonywania. Ułatwia to pracę z różnymi przejściami widoku na tej samej stronie bez deklaracji, że jedno przejście zmienia drugie.

Na przykład podczas przechodzenia do następnej lub poprzedniej strony w sekwencji podzielonej na strony możesz używać różnych animacji w zależności od tego, czy przechodzisz do strony o wyższym czy niższym numerze w sekwencji.

Przed wprowadzeniem aktywnych typów można było dodawać klasy do DOM i odpowiadać na nie w CSS. Po zakończeniu przenoszenia subskrypcji musisz jednak posprzątać.

W przypadku typów przejść widoku możesz uzyskać ten sam efekt, a dodatkowo typy te są automatycznie czyszczone po zakończeniu przejścia widoku. Typy mają zastosowanie tylko podczas rejestrowania lub wykonywania przejścia.

W przypadku przejść między widokami w tym samym dokumencie przekaż types do metody startViewTransition, która akceptuje 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 między dokumentami ustaw typy w regule @view-transition za pomocą 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 na nie odpowiadać 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ść widoku znajdziesz w dokumentacji przejść widoku w tym samym dokumencie i przejść widoku między dokumentami.

Prześlij opinię

Opinie deweloperów są zawsze mile widziane. Aby to zrobić, zgłoś problem grupie roboczej CSS w GitHub, podając sugestie i pytania. Dodaj do problemu prefiks [css-view-transitions].

Jeśli napotkasz błąd, zgłoś go w Chromium.