Transiciones fluidas con la API de View Transition

Bramus

La API de View Transition te permite crear transiciones visuales fluidas entre diferentes vistas en tu sitio web. Esto crea una experiencia del usuario más atractiva visualmente para los usuarios mientras navegan por tu sitio, independientemente de si está creado como una aplicación de varias páginas (MPA) o una aplicación de una sola página (SPA).

Las situaciones típicas en las que usarías transiciones de vistas incluyen las siguientes:

• Es una imagen en miniatura en una página de ficha de producto que se convierte en una imagen de producto de tamaño completo en la página de detalles del producto.
• Una barra de navegación fija que permanece en su lugar mientras navegas de una página a otra
• Una cuadrícula con elementos que cambian de posición a medida que aplicas filtros.

Implementa transiciones de vista

Las transiciones de vista no están vinculadas a una arquitectura o framework de aplicación específicos, y se pueden activar no solo en un solo documento, sino también entre dos documentos diferentes.

Ambos tipos de transiciones de vista se basan en los mismos principios y elementos fundamentales:

1. El navegador toma instantáneas de los estados antiguos y nuevos.
2. El DOM se actualiza mientras se suprime la renderización.
3. Las transiciones se basan en animaciones CSS.

Lo único que diferencia a ambos tipos es la forma en que se activan.

Transiciones de vista en el mismo documento

Cuando una transición de vista se ejecuta en un solo documento, se denomina transición de vista del mismo documento. Por lo general, este es el caso de las aplicaciones de una sola página (SPA). Las transiciones de vista en el mismo documento se admiten en Chrome a partir de la versión 111.

Cómo activar

Llama a document.startViewTransition para activar transiciones de vista en el mismo documento:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Ejemplo

El siguiente ejemplo de tarjetas es una SPA que usa transiciones de vista dentro del mismo documento para animar las tarjetas a medida que se agregan o quitan tarjetas nuevas.

Comienza con la compilación

Consulta la página de documentación específica para obtener toda la información sobre las transiciones de vista en el mismo documento.

Cómo compilar transiciones de vista del mismo documento

Transiciones de vista entre documentos

Cuando se produce una transición de vista entre dos documentos diferentes, se denomina transición de vista entre documentos. Esto es típico de las MPA. Las transiciones de vista entre documentos son compatibles con Chrome 126 y versiones posteriores.

Cómo activar

Las transiciones de vista entre documentos se activan con una navegación entre documentos del mismo origen, si ambas páginas habilitaron la opción. En otras palabras, no hay una API a la que se pueda llamar para iniciar una transición de vista entre documentos. Cuando un usuario hace clic en un vínculo, el clic activa la transición de vista.

Para habilitar la opción, usa el siguiente fragmento de CSS:

@view-transition {
  navigation: auto;
}

Ejemplo

El siguiente ejemplo de Stack Navigator es una MPA que usa transiciones de vista entre documentos para pasar de un documento a otro. Según si profundizas en la navegación o no, las páginas se agregan a la pila o se quitan de ella.

Comienza con la compilación

Aprende todo lo que necesitas saber sobre las transiciones de vistas entre documentos.

Crea transiciones de vista entre documentos