Transiciones de elementos de grupo

A medida que se agregan o quitan elementos de una lista, o se reorganizan, las transiciones pueden ayudar a los usuarios a mantener el contexto. Las transiciones de vistas proporcionan una forma de realizar la transición entre dos estados de un elemento asignándole un view-transition-name único. Cuando varios elementos de una página comparten el mismo comportamiento de transición, view-transition-class te permite definir esa lógica una vez en CSS en lugar de repetirla para cada view-transition-name único. Esto mantiene tus hojas de estilo manejables y, al mismo tiempo, garantiza animaciones coherentes en un grupo de elementos.

Pasos de implementación

1. Asigna nombres únicos y una clase compartida

   Cada elemento del que se deba hacer un seguimiento individual durante una transición debe tener un view-transition-name único.

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

   Para aplicar estilos compartidos, también asigna un view-transition-class.

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

2. Define la lógica de transición compartida

   Usa el pseudoelemento ::view-transition-group() con el selector de clase para aplicar estilos a todos los miembros de ese grupo.

   /* 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. Opcional: Define animaciones de entrada y salida

   Usa el selector :only-child para agregar transiciones específicas a los elementos que se agregan o quitan. Los seudoelementos ::view-transition-new() y ::view-transition-old() son elementos secundarios de un seudoelemento ::view-transition-image-pair(), por lo que podemos determinar que es un elemento agregado o quitado si es el único elemento secundario.

   /* 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. Activa la transición

   Une la actualización del DOM en document.startViewTransition(). El navegador capturará el estado anterior, realizará la actualización y, luego, animará el estado nuevo.

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

5. Mantén la interactividad de los elementos sin transición

Las transiciones de vistas funcionan superponiendo instantáneas de los elementos del DOM y, luego, realizando la transición de las instantáneas. Esto significa que, durante la transición, los elementos no son interactivos. Si hay elementos interactivos que no se incluyen en la transición, puedes inhabilitar los eventos táctiles en las transiciones de vistas para que sean interactivos.

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

Además, de forma predeterminada, el elemento :root tiene una transición de vista llamada root, que habilita las transiciones de página completa predeterminadas. Si no hay cambios en el elemento raíz, se producirá una transición entre dos instantáneas idénticas, que no son interactivas. Como solo estamos realizando la transición de elementos específicos y no de toda la pantalla, podemos inhabilitar la transición root.

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

Estrategias de resguardo

Las transiciones de vistas son una mejora progresiva. Si el navegador no admite document.startViewTransition, la actualización del DOM debería ocurrir de inmediato, lo que proporciona una experiencia funcional, pero sin animación.

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

En el caso de CSS, los navegadores que no reconozcan view-transition-class ni el selector de clase ::view-transition-group() simplemente ignorarán esas reglas y no se aplicará ninguna animación.