La API View Transitions: cambios fluidos de página y estado en el navegador
Qué hace la API View Transitions, cómo funcionan las transiciones entre el mismo documento y entre documentos, cómo diseñarlas con CSS y cómo usarlas de manera responsable.
Idea clave
La API View Transitions permite al navegador animar entre dos estados de una página. Llame a document.startViewTransition() con una función que actualiza el DOM, y el navegador captura las vistas antiguas y nuevas y las anima entre ellas, lo que puede diseñar con pseudoelementos ::view-transition. Funciona dentro de aplicaciones de una sola página y, en navegadores compatibles, en navegación entre páginas.
como funciona
MDN describe document.startViewTransition() como el inicio de una transición de vista del mismo documento, típico en aplicaciones de una sola página. El navegador captura la vista actual, ejecuta la actualización, captura la nueva vista y anima entre ellas. Por defecto, se trata de un fundido cruzado; CSS te permite cambiarlo.
Mismo documento y entre documentos
Las transiciones del mismo documento se ejecutan dentro de una página, como en los SPA, y Chrome las admite desde Chrome 111. Las transiciones entre documentos se animan entre páginas separadas en sitios de varias páginas, lo que MDN señala que históricamente había sido imposible; utilizan los eventos de intercambio de páginas y revelación de páginas y una suscripción voluntaria en CSS. La compatibilidad del navegador difiere entre los dos, así que consulte las tablas de compatibilidad actuales.
Diseñar la transición
La mayor parte de la personalización es simple CSS:
- Asigne a un elemento un nombre de transición de vista para animarlo por separado del resto de la página, como una miniatura que se convierte en una imagen principal.
- Apunte a ::view-transition-old() y ::view-transition-new() para personalizar la animación.
- Mantenga las duraciones cortas y el movimiento significativo.
- Envuelva animaciones personalizadas en comprobaciones de movimiento reducido.
Mejora progresiva
Siempre verifique el soporte antes de llamar a la API y actualice el DOM directamente si falta. La página debería funcionar de manera idéntica sin la animación. Evite transiciones largas en la navegación, que hacen que todo el sitio parezca más lento.
Fragmento de implementación en producción
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Principios clave para recordar
- startViewTransition() captura vistas antiguas y nuevas y anima entre ellas
- Existen variantes del mismo documento (SPA) y entre documentos (varias páginas)
- Estilo con pseudoelementos view-transition-name y ::view-transition
- Verifique el soporte y recurra a una actualización instantánea
- Mantenga las transiciones cortas y respete el movimiento reducido.
Preguntas frecuentes
Fuentes
- View Transition API — Documentos web MDN
- Smooth transitions with the View Transition API — Chrome para desarrolladores