Chrome 147 habilita las transiciones de vista anidadas y simultáneas con transiciones de vista con alcance de elemento

Bramus

Publicación: 27 de marzo de 2026

Chrome 147 introduce transiciones de vista con alcance de elementos, una función que te permite iniciar una transición de vista en un subárbol del DOM llamando a Element.startViewTransition().

Esta función permite que se ejecuten varias transiciones de vista de forma simultánea, anidar transiciones de vista en curso y resolver problemas de capas con el contenido de position: fixed, todo mientras se mantiene la interactividad del resto de la página.

¿Qué cambió?

Desde que anunciamos que la función estaba lista para las pruebas de los desarrolladores en Chrome 140, colaboramos con la comunidad y el equipo de trabajo de CSS para finalizar los detalles, en particular, en relación con los comportamientos predeterminados:

• Las raíces de alcance participan por sí mismas de forma predeterminada.
• Las transiciones de vista con alcance contienen automáticamente sus seudoelementos anidados con grupos de transición de vista anidados.
• El seudoelemento ::view-transition-group-children() en una transición de vista con alcance recorta automáticamente su contenido si la raíz del alcance recorta su desbordamiento.
• Las transiciones de vistas con alcance de elemento aplican automáticamente contain: layout y view-transition-scope: all a la raíz del alcance durante la transición.

Después de estas actualizaciones, las transiciones de vista con alcance de elementos estarán disponibles en Chrome Stable a partir de la versión 147.

Demostraciones

Cómo reorganizar listas

En esta demostración, puedes mezclar los elementos de cada lista. También puedes intercambiar las posiciones de las listas seleccionando el botón que se encuentra en el centro.

Como se usan transiciones de vista con alcance de elemento, ambas listas pueden ejecutar sus transiciones de vista de reproducción aleatoria de forma simultánea. También puedes iniciar la transición de vista externa, que intercambia las posiciones de las listas, mientras se reorganizan los elementos de la lista.

Mi viaje a la Patagonia

La demostración de"Mi viaje a la Patagonia" muestra transiciones de vistas con alcance de elementos. Esta demostración se creó en función del video de la campaña "Experiencia del usuario web reinventada".

Usa los menús desplegables para filtrar los elementos de la cuadrícula. Usa el botón Agregar en cada elemento de la cuadrícula para agregarlos a la lista de elementos seleccionados, que aparece en la barra lateral.

En la demostración, se usan transiciones de vistas con alcance de elementos en tres lugares:

• Es la cuadrícula de elementos cuando se filtran.
• Son los elementos de la cuadrícula cuando se agregan a la lista de elementos seleccionados.
• Es la barra lateral que muestra la lista de elementos seleccionados.

Leer la guía

Para obtener más información sobre las transiciones de vista con alcance de elementos, lee la guía. En él, se muestra cómo implementar transiciones de vista con alcance de elemento, se explican detalles adicionales y se incluyen más demostraciones.

Lee la guía sobre las transiciones de vista con alcance de elemento