View Transitions API: ejemplos en vivo para SPA y multipágina | We.Inc
Ejemplos funcionales de la View Transitions API: startViewTransition en una lista que puedes barajar, elementos con nombre que se transforman, @view-transition entre páginas, tipos, React y compatibilidad.
Ejemplos de la View Transitions API
La View Transitions API anima el paso entre dos estados de una página. En una aplicación de una sola página, envuelve la actualización del DOM en document.startViewTransition(() => update()). Entre páginas del mismo origen, añade @view-transition { navigation: auto; } a ambas páginas. Dale a un elemento un view-transition-name único y el navegador lo transformará desde su posición anterior hasta la nueva.
Dos tipos de view transition
Mismo documento (SPA)
Entre documentos (MPA)
Cómo se inicia
document.startViewTransition()
@view-transition { navigation: auto; } en ambas páginas
Chrome y Edge
111 y posteriores
126 y posteriores
Safari
18 y posteriores
18.2 y posteriores
Firefox
144 y posteriores
Aún no compatible
Baseline
Recién disponible (octubre de 2025)
No es Baseline
La mayoría de las explicaciones sobre view transitions describen el árbol de pseudoelementos y se quedan ahí. Esta página empieza con una demo que funciona en tu navegador: baraja una cuadrícula, abre una tarjeta en una vista de detalle y observa cómo se mueven los elementos con nombre. Después te da el código de cada patrón, la configuración entre páginas y las alternativas para navegadores sin soporte.
Pulsa Barajar para reordenar la cuadrícula. Cada mosaico tiene su propio view-transition-name, así que cada uno se desliza hasta su nuevo lugar.
Haz clic en un mosaico para abrirlo. El bloque de color y el título se transforman en la vista de detalle porque comparten nombre con ella.
Si tu navegador no tiene la API, la demo se actualiza igualmente al instante y te lo indica.
Copia los fragmentos de abajo para JavaScript puro, React y sitios multipágina.
Cada view-transition-name de la página debe ser único en el momento de la captura. Un duplicado hace que la promesa ready se rechace y la transición se omite.
Usa view-transition-name: match-element en una transición del mismo documento para dar nombre automáticamente a cada elemento de una lista.
Obtén los datos antes de ejecutar startViewTransition. El renderizado queda congelado mientras se ejecuta el callback de actualización, así que un callback lento parece un bloqueo.
Comprueba que existe document.startViewTransition antes de usarlo, y si no existe ejecuta directamente la actualización.
Reduce las animaciones dentro de una consulta prefers-reduced-motion: reduce; el cambio de estado se produce igualmente.
Preguntas frecuentes
¿Qué hace document.startViewTransition?
Captura la página actual, ejecuta tu callback de actualización y luego anima desde la captura anterior hasta el nuevo estado real. Devuelve un objeto ViewTransition con las promesas ready, finished y updateCallbackDone y un método skipTransition().
¿Cómo añado view transitions entre páginas?
Pon @view-transition { navigation: auto; } en el CSS tanto de la página que abandonas como de la página a la que llegas. Las páginas deben compartir origen, y por defecto obtienes un fundido cruzado. Da a los elementos equivalentes el mismo view-transition-name en ambas páginas para transformarlos.
¿Funcionan las view transitions en Firefox?
Las transiciones del mismo documento funcionan desde Firefox 144. Las transiciones entre documentos no eran compatibles con Firefox en el momento de escribir esto, así que en esos navegadores la navegación simplemente ocurre sin animación.
¿Cómo uso las view transitions en React?
Ejecuta document.startViewTransition y actualiza el estado dentro de flushSync de react-dom, para que React escriba el nuevo DOM de forma síncrona antes de que el navegador tome la nueva captura.
¿Cómo personalizo la animación?
Aplica estilos a los pseudoelementos. ::view-transition-old(name) es la captura saliente y ::view-transition-new(name) la entrante, y ::view-transition-group(name) controla el tamaño y la posición. Usa root como nombre para la página completa.
Qué ocurre durante una transición
El navegador captura el estado actual como imágenes, una para la página y otra para cada elemento con nombre. Ejecuta tu actualización mientras el renderizado está en pausa y después captura el nuevo estado.
Construye un árbol de pseudoelementos sobre la página: un grupo por cada nombre, con una imagen antigua y otra nueva. Por defecto el grupo anima el tamaño y la posición mientras las dos imágenes hacen un fundido cruzado, y eso es lo que crea la transformación.
Nombrar bien los elementos
Un nombre vincula un elemento del estado anterior con otro del nuevo estado. La foto de un producto en una lista y la foto grande de su página de detalle pueden compartir un nombre como product-42, y el navegador anima una hasta convertirla en la otra.
Asigna el nombre solo donde haga falta. Nombrar un elemento que no cambia sigue costando una captura aparte.
Tipos para distintas direcciones
startViewTransition también acepta un objeto de opciones con una función update y un array types. Un tipo como forwards o backwards puede luego seleccionarse en CSS con el selector :active-view-transition-type(), de modo que al volver atrás la animación se desliza en sentido contrario.
Para las navegaciones entre páginas, el descriptor types dentro de @view-transition define los tipos del mismo modo.
Transiciones en el mismo documento
startViewTransition con detección de soporte
Los navegadores sin la API ejecutan la actualización directamente, así que nada se rompe.
Transformar una miniatura en una imagen principal
Solo un elemento puede llevar el nombre a la vez, así que asígnalo a la miniatura pulsada justo antes de la transición.
React
startViewTransition con flushSync
flushSync hace que React confirme el nuevo DOM dentro del callback.
Transiciones entre documentos
Deslizar entre las páginas de un sitio multipágina
Inclúyelo en la hoja de estilos de cada página que deba participar. Solo mismo origen.
Referencia de la API
Las piezas de la View Transitions API
Nombre
Tipo
Qué hace
document.startViewTransition(update)
Método
Inicia una transición en el mismo documento y devuelve un ViewTransition
ViewTransition.ready
Promesa
Se resuelve cuando existen los pseudoelementos y la animación está a punto de empezar
ViewTransition.finished
Promesa
Se resuelve cuando termina la animación y el nuevo estado está activo
ViewTransition.updateCallbackDone
Promesa
Se resuelve cuando tu callback de actualización ha terminado
ViewTransition.skipTransition()
Método
Omite la animación; la actualización se ejecuta igualmente
Propiedad CSS
Da a un elemento su propia captura para transformarla
@view-transition
Regla at de CSS
Activa en una página las transiciones entre documentos
::view-transition-old() / -new()
Pseudoelementos
Las capturas saliente y entrante
::view-transition-group()
Pseudoelemento
Anima el tamaño y la posición de un nombre
pageswap / pagereveal
Eventos
Permiten que un script ajuste una transición entre documentos
Puerto
Prado
Brasa
Ocaso
Pizarra
Coral
El movimiento reducido está activado, así que el cambio fue instantáneo.
Tu navegador no admite view transitions, así que el cambio fue instantáneo.
Demo en vivo
Baraja la cuadrícula o abre una tarjeta. Cada mosaico tiene su propio view-transition-name, así que el navegador lo anima hasta su nueva posición.
Barajar
Volver a la cuadrícula
El bloque de color y el título se transformaron desde la cuadrícula porque aquí conservan los mismos nombres.