Transiciones de navegación direccional

Las aplicaciones de una página (SPA) proporcionan la apariencia de navegación reemplazando el contenido de la página sin navegar a una nueva. De forma predeterminada, el contenido simplemente se reemplaza, sin transiciones. Las transiciones direccionales pueden reforzar visualmente una relación espacial entre las vistas.

Si deslizas contenido nuevo desde la dirección en la que se mueve el usuario, creas un mapa mental de la estructura de la aplicación. Por ejemplo, un sitio de productos puede mostrar una transición hacia la derecha para "avanzar" y hacia la izquierda para "retroceder", o una presentación de diapositivas puede realizar una transición hacia arriba y hacia abajo para mostrar las diapositivas siguiente y anterior.

Pasos de implementación

1. Detectar la dirección de navegación: Determina si el usuario se mueve "hacia adelante" o "hacia atrás" en el flujo de la aplicación. La forma en que detectes la dirección dependerá de tu caso de uso.
2. Activa la transición con tipos: Pasa la dirección en un array types a document.startViewTransition() para categorizar la transición.
3. Define animaciones direccionales con CSS: Usa la pseudoclase :active-view-transition-type() para aplicar animaciones específicas según el tipo de navegación.

Definición de fotogramas clave

Define animaciones deslizantes hacia y desde cada dirección. Para obtener el mejor rendimiento, anima los cambios de posición con la propiedad transform o las propiedades de transformación individuales, scale, rotate y translate. opacity también suele tener un buen rendimiento, pero evita animar otras propiedades de CSS sin verificar primero que no activen el diseño ni la pintura.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Establece la configuración de animación compartida

Usa el selector ::view-transition-group(root) para aplicar la configuración de animación que se comparte en todas las transiciones.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Cómo aplicar animaciones direccionales

Usa la seudoclase active-view-transition-type para segmentar las vistas de transición específicamente cuando el tipo "forward" o "backward" esté activo.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Activa la transición

Cuando navegues, pasa el tipo adecuado al método startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Accesibilidad

Respeta siempre las preferencias del usuario de reducir el movimiento inhabilitando o simplificando las animaciones.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Estrategias de resguardo

La API de View Transitions es una mejora progresiva. En los navegadores no compatibles, document.startViewTransition será undefined. Debes unir tu lógica de navegación en una verificación de detección de funciones para asegurarte de que la actualización del DOM se siga produciendo de inmediato sin animación, como se muestra en esta función auxiliar.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}