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

Bramus

Na konferencji Google I/O 2024 ogłosiłem kolejny krok dotyczący przechodzenia między widokami: przejścia między dokumentami w aplikacjach wielostronicowych (MPA).

Oprócz tego przedstawiliśmy kilka ulepszeń, które ogólnie ułatwiają pracę z przejściami między widokami.

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

Te ulepszenia dotyczą zarówno przejść z widoku tego samego dokumentu w przypadku aplikacji jednostronicowych (SPA), jak i przejścia między widokiem wielu dokumentów w przypadku MPA.

Przejścia widoku różnych dokumentów w MPA

W Chrome 111 zespół Chrome udostępnił przejścia w widoku tych samych dokumentów w przypadku aplikacji jednostronicowych. Jest to bardzo przydatna funkcja w społeczności twórców stron internetowych.

Cieszymy się, że wielu z Was udało się stworzyć dzięki efektom przejść. Od typowych implementacji, które polegają na tym, że miniatura zmienia się w wielkie zdjęcie. po spersonalizowane i wirtualne treści, takie jak ta w Airbnb. Super!

Jednak w początkowej implementacji musisz utworzyć SPA, aby korzystać z przejścia między widokami. Od wersji Chrome 126 przechodzenie między widokami jest teraz domyślnie włączone w przypadku nawigacji z tej samej domeny. Możesz teraz utworzyć przejście widoku między 2 różnymi dokumentami tego samego pochodzenia.

Aby umożliwić przełączanie widoku 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 widokiem tego samego dokumentu bazują na tych samych elementach składowych i zasadach co przejścia w widoku 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 różnych dokumentów, 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 wykonaniem poprzednich zrzutów.
• Dzięki pagereveal możesz dostosować nową stronę, zanim rozpocznie się jej wyświetlanie po zainicjowaniu.

W obu wydarzeniach masz dostęp do obiektu NavigationActivation, aby dostosować przejście widoku wielu dokumentów na podstawie starych i nowych wpisów historii miejsc docelowych lub typu nawigacji.

Dodatkowo możesz poczekać na wczytanie treści z blokowaniem renderowania i zdać się na renderowanie wstępne, które skróci czas wczytywania przed przejściem widoku.

Prezentacja

Ta prezentacja na temat Nawigatora stosu łączy wszystkie te funkcje (wraz z kilkoma ulepszeniami).

To jest MPA z nawigacją w różnych dokumentach, hostowany w tym samym źródle. W 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 aktywowaniu i dostosowywaniu przejść między widokami różnych dokumentów znajdziesz w dokumentacji dotyczącej przejścia między widokami różnych dokumentów.

Zobacz ulepszenia procesów przenoszenia

Oprócz przesyłania przejścia między widokami różnych dokumentów w plikach MPA wprowadziliśmy też kilka ulepszeń w zakresie pracy z przejściami widoku.

Te ulepszenia mają zastosowanie zarówno do przejść z widokiem tego samego dokumentu w przypadku SPA, jak i przejść widoku różnych dokumentów w przypadku MPA.

Udostępnij style animacji w usłudze view-transition-class

Do tej pory, aby animować wiele zrzutów dysku w ten sam sposób, trzeba było kierować reklamy na każdy zrzut z osobna, powtarzając jego 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żywaj tej wspólnej nazwy w pseudoselektorach, aby kierować reklamy na wszystkie pasujące zrzuty. 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 usłudze view-transition-class, przeczytaj specjalną dokumentację view-transition-class.

Selektywne przejścia widoku z aktywnymi typami

Innym ulepszeniem wyświetlania przejść jest dodanie 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 konieczności deklarowania drugiej strony.

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 aktywnymi typami można było dodawać klasy do interfejsu DOM i odpowiadać na nie w CSS. Trzeba też jednak wyczyścić dane po zakończeniu przenoszenia.

Za pomocą różnych typów przejść z widokiem można osiągnąć ten sam wynik, a dodatkowa korzyść płynie z ich automatycznego czyszczenia po zakończeniu przejścia. Typy mają zastosowanie tylko wtedy, gdy przechwytujesz lub wykonujesz przejście.

W przypadku przejść z widokiem tego samego dokumentu 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],
}););

Aby przejść do widoku różnych dokumentów, 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 reagować w CSS za pomocą selektorów pseudoklas :active-view-transition-type() i :active-view-transition, które mają zastosowanie do poziomu głównego 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ścia między widokami znajdziesz w specjalnej dokumentacji dotyczącej przejścia między widokiem tego samego dokumentu i przejścia między widokiem wielu dokumentów.

Prześlij opinię

Opinie deweloperów są dla nas bardzo ważne. Aby to zrobić, zgłoś problem w grupie roboczej ds. usług porównywania cen na GitHubie, przesyłając sugestie i pytania. Dodaj do problemu prefiks [css-view-transitions].

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