Listo para las pruebas de desarrolladores: Transiciones de vista con alcance

Bramus

Publicado: 10 de septiembre de 2025

Las transiciones de vistas con alcance son una extensión propuesta para la API de View Transition que te permite iniciar una transición de vista en un subárbol del DOM. La función está lista para probarse a partir de Chrome 140 con la marca "Experimental Web Platform features" habilitada en chrome://flags. Estamos buscando activamente comentarios de los desarrolladores.

Introducción rápida

Para iniciar una transición de vista con alcance, llama a element.startViewTransition() (en lugar de document.startViewTransition()) en cualquier HTMLElement con contain: layout aplicado.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

El resultado es una transición de vista que se limita al subárbol de tu HTMLElement elegido, y el seudoárbol ::view-transition resultante se inyecta en ese HTMLElement. El HTMLElement actúa como contenedor de las animaciones de transición.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Las transiciones con alcance permiten que se ejecuten varias transiciones de vista al mismo tiempo (siempre y cuando tengan diferentes elementos raíz de transición). Los eventos de puntero se evitan solo en ese subárbol (que puedes volver a habilitar), en lugar de en todo el documento. Además, permiten que los elementos fuera de la raíz de la transición se pinten sobre la transición de vista con alcance.

Obtén más información sobre las transiciones de vista con alcance en la explicación de las transiciones de vista con alcance.

Demostración

En la siguiente demostración, puedes mover un punto dentro de su contenedor haciendo clic en uno de los botones. Esto se puede hacer con transiciones de vista con alcance de documento o con alcance de elemento, lo que te permite ver cómo se comportan de manera diferente.

Con las transiciones de vista con alcance, el punto permanece recortado por su elemento superior durante la transición. Además, el punto no se superpone al elemento emergente cuando se muestra.

Se buscan comentarios

Nos interesan los comentarios de la comunidad de desarrolladores web sobre los siguientes temas:

• Es la forma de la API de Scoped View Transitions.
• Casos de uso en los que la función funciona bien o no funcionó como se esperaba
• Cómo se deben resolver las preguntas sobre los alcances de participación propia

Comparte tus comentarios en el problema núm. 9890 del WG de CSS. Antes de enviar comentarios, familiarízate con los problemas conocidos y las restricciones.

Si encuentras un error, informa un error de Chromium para que lo sepamos.