Overgangen van groepselementen

Als items worden toegevoegd aan of verwijderd uit een lijst, of opnieuw worden gerangschikt, kunnen overgangen gebruikers helpen de context te behouden. Met weergaveovergangen kun je overschakelen tussen 2 statussen van een element door het element een unieke view-transition-name te geven. Als meerdere elementen op een pagina hetzelfde overgangsgedrag hebben, kun je met view-transition-class die logica één keer definiëren in CSS in plaats van deze te herhalen voor elke unieke view-transition-name. Zo blijven je stylesheets onderhoudbaar en zorg je voor consistente animaties voor een groep elementen.

Stapsgewijze implementatie

1. Unieke namen en een gedeelde lesgroep toewijzen

   Elk element dat afzonderlijk moet worden bijgehouden tijdens een overgang, moet een unieke view-transition-name hebben.

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

   Als je gedeelde stijlen wilt toepassen, wijs je ook een view-transition-class toe.

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

2. De gedeelde overgangslogica definiëren

   Gebruik het pseudoelement ::view-transition-group() met de klasseselector om stijlen toe te passen op alle leden van die groep.

   /* 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. Optioneel: Animaties voor openen en sluiten definiëren

   Gebruik de kiezer :only-child om specifieke overgangen toe te voegen aan de elementen die worden toegevoegd of verwijderd. ::view-transition-new()- en ::view-transition-old()-pseudoelementen zijn onderliggende elementen van een ::view-transition-image-pair()-pseudoelement. We kunnen dus bepalen of het een toegevoegd of verwijderd element is als het het enige onderliggende element is.

   /* 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. De overgang activeren

   Verpak de DOM-update in document.startViewTransition(). De browser legt de oude status vast, voert de update uit en animeert dan naar de nieuwe status.

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

5. De interactiviteit van niet-overgezette elementen behouden

Weergaveovergangen werken door momentopnamen van de DOM-elementen over elkaar heen te leggen en vervolgens de momentopnamen over te zetten. Dit betekent dat elementen tijdens de overgang niet interactief zijn. Als er interactieve elementen zijn die niet worden overgezet, kun je ze interactief maken door aanraakgebeurtenissen uit te zetten voor de weergaveovergangen.

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

Daarnaast heeft het element :root standaard een weergaveovergang met de naam root, waardoor standaardovergangen voor hele pagina's mogelijk zijn. Als er geen wijzigingen zijn in het hoofdelement, is dit een overgang tussen 2 identieke momentopnamen die niet interactief zijn. Omdat we alleen specifieke elementen overzetten en niet het hele scherm, kunnen we de overgang root uitzetten.

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

Reservestrategieën

Weergaveovergangen zijn een progressive enhancement. Als de browser document.startViewTransition niet ondersteunt, moet de DOM-update nog steeds onmiddellijk plaatsvinden, wat een functionele maar niet-geanimeerde functionaliteit biedt.

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

Voor CSS negeren browsers die view-transition-class of de klasseselector ::view-transition-group() niet herkennen, die regels gewoon en wordt er geen animatie toegepast.