Transitions d'éléments de groupe

Lorsque des éléments sont ajoutés, supprimés ou réorganisés dans une liste, les transitions peuvent aider les utilisateurs à conserver le contexte. Les transitions de vue permettent de passer d'un état à un autre d'un élément en lui attribuant un view-transition-name unique. Lorsque plusieurs éléments d'une page partagent le même comportement de transition, view-transition-class vous permet de définir cette logique une seule fois en CSS plutôt que de la répéter pour chaque view-transition-name unique. Cela permet de maintenir vos feuilles de style tout en garantissant des animations cohérentes sur un groupe d'éléments.

Procédure d'implémentation

1. Attribuer des noms uniques et une classe partagée

   Chaque élément devant être suivi individuellement lors d'une transition doit avoir un view-transition-name unique.

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

   Pour appliquer des styles partagés, attribuez également un view-transition-class.

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

2. Définir la logique de transition partagée

   Utilisez le pseudo-élément ::view-transition-group() avec le sélecteur de classe pour appliquer des styles à tous les membres de ce groupe.

   /* 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. Facultatif : Définir des animations d'entrée et de sortie

   Utilisez le sélecteur :only-child pour ajouter des transitions spécifiques aux éléments ajoutés ou supprimés. Les pseudo-éléments ::view-transition-new() et ::view-transition-old() sont des enfants d'un pseudo-élément ::view-transition-image-pair(). Nous pouvons donc déterminer s'il s'agit d'un élément ajouté ou supprimé s'il s'agit du seul enfant.

   /* 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. Déclencher la transition

   Encapsulez la mise à jour du DOM dans document.startViewTransition(). Le navigateur capture l'ancien état, effectue la mise à jour, puis anime le nouvel état.

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

5. Maintenir l'interactivité des éléments sans transition

Les transitions de vue fonctionnent en superposant des instantanés des éléments DOM, puis en effectuant une transition entre ces instantanés. Cela signifie que pendant la transition, les éléments ne sont pas interactifs. Si certains éléments interactifs ne sont pas inclus dans la transition, vous pouvez les rendre interactifs en désactivant les événements tactiles sur les transitions de vue.

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

De plus, par défaut, l'élément :root comporte une transition de vue nommée root, qui active les transitions pleine page par défaut. Si l'élément racine n'est pas modifié, il s'agit d'une transition entre deux instantanés identiques, qui ne sont pas interactifs. Comme nous ne faisons passer que des éléments spécifiques et non l'intégralité de l'écran, nous pouvons désactiver la transition root.

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

Stratégies de remplacement

Les transitions de vue sont une amélioration progressive. Si le navigateur n'est pas compatible avec document.startViewTransition, la mise à jour du DOM doit toujours se produire immédiatement, ce qui offre une expérience fonctionnelle, mais non animée.

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

Pour le CSS, les navigateurs qui ne reconnaissent pas view-transition-class ou le sélecteur de classe ::view-transition-group() ignoreront simplement ces règles, et aucune animation ne sera appliquée.