Przejścia elementów grupy

Gdy elementy są dodawane do listy, usuwane z niej lub zmieniana jest ich kolejność, przejścia mogą pomóc użytkownikom zachować kontekst. Przejścia widoku umożliwiają przechodzenie między 2 stanami elementu przez nadanie mu unikalnej właściwości view-transition-name. Gdy wiele elementów na stronie ma takie samo zachowanie przejścia, view-transition-class umożliwia jednorazowe zdefiniowanie tej logiki w kodzie CSS zamiast powtarzania jej dla każdego unikalnego elementu view-transition-name. Dzięki temu arkusze stylów są łatwe w utrzymaniu, a animacje w grupie elementów są spójne.

Etapy wdrażania

1. Przypisywanie unikalnych nazw i udostępnianie zajęć

   Każdy element, który musi być śledzony osobno podczas przejścia, musi mieć unikalny atrybut view-transition-name.

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   Aby zastosować style udostępnione, przypisz też view-transition-class.

   .item {
     view-transition-class: list-item;
   }
   

2. Definiowanie logiki wspólnego przejścia

   Użyj pseudoelementu ::view-transition-group() z selektorem klasy, aby zastosować style do wszystkich elementów w tej grupie.

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. Opcjonalnie: definiowanie animacji wejścia i wyjścia

   Użyj selektora :only-child, aby dodać konkretne przejścia do dodawanych lub usuwanych elementów. Pseudoelementy ::view-transition-new() i ::view-transition-old() są elementami podrzędnymi pseudoelementu ::view-transition-image-pair(), więc możemy określić, czy jest to element dodany czy usunięty, jeśli jest to jedyny element podrzędny.

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

4. Wywoływanie przejścia

   Zawiń aktualizację DOM w document.startViewTransition(). Przeglądarka zarejestruje stary stan, przeprowadzi aktualizację, a następnie animuje nowy stan.

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. Zachowywanie interaktywności elementów nieumożliwiających ruchu (między sieciami)

Przejścia widoku działają przez nakładanie zrzutów elementów DOM, a następnie ich przechodzenie. Oznacza to, że podczas przejścia elementy nie są interaktywne. Jeśli są elementy interaktywne, które nie zostały przeniesione, możesz je uczynić interaktywnymi, wyłączając zdarzenia dotknięcia w przejściach widoku.

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

Dodatkowo element :root ma domyślnie przejście widoku o nazwie root, które umożliwia domyślne przejścia na całą stronę. Jeśli nie ma zmian w elemencie głównym, będzie to przejście między 2 identycznymi zrzutami, które nie są interaktywne. Ponieważ przenosimy tylko określone elementy, a nie cały ekran, możemy wyłączyć przejście root.

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

Strategie zastępcze

Przejścia widoków to progresywne ulepszanie. Jeśli przeglądarka nie obsługuje document.startViewTransition, aktualizacja DOM powinna nastąpić natychmiast, zapewniając funkcjonalne, ale nieanimowane działanie.

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

W przypadku CSS przeglądarki, które nie rozpoznają selektora klasy view-transition-class lub ::view-transition-group(), po prostu zignorują te reguły i nie zastosują animacji.