API View Transitions

La View Transitions API (Chrome 111+) permite realizar transiciones fluidas y animadas entre distintos estados de una página o entre navegaciones. Captura instantáneas del estado anterior y posterior, y las transforma mediante animaciones CSS, lo que permite crear transiciones propias de una aplicación en la web.

Inicie una transición en la misma página envolviendo una actualización del DOM en document.startViewTransition(() => updateDom()). El navegador captura el estado anterior, ejecuta la actualización, captura el nuevo estado y realiza automáticamente un fundido cruzado entre ambos.

Sin ningún CSS, View Transitions realiza un fundido cruzado sencillo entre los estados anterior y nuevo de la página. Esta única línea de JavaScript añade una transición pulida que antes requería coordinar animaciones CSS complejas o utilizar una biblioteca de animación específica.

La API expone cuatro pseudoelementos: ::view-transition (superposición raíz), ::view-transition-old(root) (instantánea de la página anterior), ::view-transition-new(root) (instantánea de la página nueva) y ::view-transition-image-pair(root). Personalícelos con animaciones CSS.

Asigne view-transition-name: hero-image a un elemento que permanezca durante la transición. La API transforma ese elemento desde su posición y tamaño anteriores hasta su nueva posición y tamaño, creando automáticamente una animación fluida a nivel de elemento.

Reemplace el fundido cruzado predeterminado con fotogramas clave personalizados en los pseudoelementos: deslice desde la derecha para la navegación hacia delante y desde la izquierda para volver atrás. Seleccione ::view-transition-new(root) y ::view-transition-old(root) con @keyframes.

Las View Transitions entre documentos (Chrome 126+) animan las navegaciones de página completa en aplicaciones multipágina. Añada @view-transition { navigation: auto; } al CSS y el navegador gestionará automáticamente la transición entre las páginas HTML, sin necesidad de JavaScript.

Las personas con trastornos vestibulares no deberían experimentar transiciones con mucho movimiento. Incluya las animaciones de transición en @media (prefers-reduced-motion: no-preference) para desactivar las animaciones personalizadas para quienes prefieren reducir el movimiento, sin dejar de realizar la actualización funcional del DOM.

React Router v6.4+, Vue Router y Astro son compatibles con View Transitions. Los frameworks envuelven automáticamente los cambios de ruta en startViewTransition. Configure los estilos de transición por ruta con view-transition-name en elementos persistentes, como la navegación y las estructuras base del diseño.

View Transitions captura instantáneas de la página, lo que puede resultar costoso en diseños complejos. Las páginas grandes con muchas capas compuestas pueden presentar tirones durante la captura. Mantenga la duración de la transición por debajo de 300 ms y evite realizar transiciones en subárboles extremadamente complejos.

Compruebe que la API esté disponible antes de utilizarla: if (!document.startViewTransition) { updateDom(); return; }. La alternativa actualiza el DOM normalmente, sin animación. View Transitions es una mejora progresiva: la aplicación funciona sin ella y simplemente ofrece una experiencia mejor allí donde es compatible.

¿Qué permite view-transition-name en un elemento durante una View Transition?

La View Transitions API permite realizar fundidos cruzados y animaciones de transformación entre estados del DOM o navegaciones con muy poco código. Los elementos con nombre de transición se transforman automáticamente y las animaciones personalizadas de pseudoelementos reemplazan el fundido cruzado predeterminado. Respete prefers-reduced-motion y use mejoras progresivas para los navegadores que no sean compatibles.