Übergänge für Gruppenelemente

Wenn Elemente zu einer Liste hinzugefügt, daraus entfernt oder neu angeordnet werden, können Übergänge Nutzern helfen, den Kontext beizubehalten. Mit Ansichtsübergängen können Sie zwischen zwei Zuständen eines Elements wechseln, indem Sie dem Element einen eindeutigen view-transition-name zuweisen. Wenn mehrere Elemente auf einer Seite dasselbe Übergangsverhalten haben, können Sie mit view-transition-class diese Logik einmal in CSS definieren, anstatt sie für jedes einzelne view-transition-name zu wiederholen. So bleiben Ihre Stylesheets wartbar und Sie erhalten konsistente Animationen für eine Gruppe von Elementen.

Implementierungsschritte

1. Eindeutige Namen und einen freigegebenen Kurs zuweisen

   Jedes Element, das während eines Übergangs einzeln verfolgt werden muss, muss eine eindeutige view-transition-name haben.

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

   Wenn Sie freigegebene Stile anwenden möchten, weisen Sie auch eine view-transition-class zu.

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

2. Logik für den gemeinsamen Übergang definieren

   Verwenden Sie das Pseudoelement ::view-transition-group() mit dem Klassenselektor, um Stile auf alle Mitglieder dieser Gruppe anzuwenden.

   /* 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. Optional: Animationen zum Ein- und Ausblenden definieren

   Verwenden Sie den Selektor :only-child, um den hinzugefügten oder entfernten Elementen bestimmte Übergänge hinzuzufügen. Die Pseudoelemente ::view-transition-new() und ::view-transition-old() sind untergeordnete Elemente eines ::view-transition-image-pair()-Pseudoelements. Wenn es das einzige untergeordnete Element ist, können wir also feststellen, ob es sich um ein hinzugefügtes oder entferntes Element handelt.

   /* 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. Übergang auslösen

   Verpacken Sie die DOM-Aktualisierung in document.startViewTransition(). Der Browser erfasst den alten Zustand, führt die Aktualisierung durch und animiert dann den Übergang zum neuen Zustand.

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

5. Interaktivität von Elementen ohne Übergang beibehalten

Bei Ansichtsübergängen werden Snapshots der DOM-Elemente übereinandergelegt und dann die Snapshots umgewandelt. Das bedeutet, dass Elemente während des Übergangs nicht interaktiv sind. Wenn es interaktive Elemente gibt, die nicht umgestellt werden, können Sie sie interaktiv machen, indem Sie Touch-Events für die Ansichtsübergänge deaktivieren.

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

Außerdem hat das :root-Element standardmäßig einen Ansichtsübergang namens root, der standardmäßige ganzseitige Übergänge ermöglicht. Wenn am Stammelement keine Änderungen vorgenommen werden, ist dies ein Übergang zwischen zwei identischen Snapshots, die nicht interaktiv sind. Da wir nur bestimmte Elemente und nicht den gesamten Bildschirm umstellen, können wir den Übergang root deaktivieren.

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

Fallback-Strategien

Übergänge sind eine progressive Verbesserung. Wenn der Browser document.startViewTransition nicht unterstützt, sollte die DOM-Aktualisierung trotzdem sofort erfolgen, um eine funktionale, aber nicht animierte Darstellung zu ermöglichen.

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

Bei CSS ignorieren Browser, die view-transition-class oder den Klassenselektor ::view-transition-group() nicht erkennen, diese Regeln einfach und es wird keine Animation angewendet.