Novedades en las transiciones de vista (actualización de 2025)

Bramus

Publicado: 8 de octubre de 2025

Mucho cambió desde que lanzamos las transiciones de vista en el mismo documento en 2023.

En 2024, lanzamos las transiciones de vista entre documentos, agregamos mejoras como view-transition-class y tipos de transiciones de vista, y también le dimos la bienvenida a Safari, que agregó compatibilidad con las transiciones de vista.

En esta publicación, se ofrece una descripción general de los cambios en las transiciones de vista para 2025.

Mejor compatibilidad con navegadores y frameworks

Las transiciones de vista en el mismo documento están a punto de convertirse en Baseline Newly available

Un área de enfoque de Interop 2025 es la API de View Transition, específicamente las transiciones de vista en el mismo documento con document.startViewTransition(updateCallback), view-transition-class, el asignación automática de nombres con view-transition-name: match-element y el selector de CSS :active-view-transition.

Firefox tiene la intención de incluir estas funciones en la próxima versión de Firefox 144, que se volverá estable el 14 de octubre de 2025. Esto hará que estas funciones estén disponibles como Baseline Newly.

Ahora, la API de View Transition es compatible con el núcleo de React

A lo largo del año, el equipo de React trabajó para agregar transiciones de vista al núcleo de React. Anunciaron react@experimental la compatibilidad en abril y, esta semana, en React Conf, trasladaron la compatibilidad a react@canary, lo que significa que el diseño está casi finalizado.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Puedes consultar la documentación de React<ViewTransition> para obtener todos los detalles o mirar esta charla de Aurora Scharff para obtener una buena introducción sobre el tema.

Funciones lanzadas recientemente

Asigna nombres automáticamente a los elementos con view-transition-name: match-element

Para marcar un elemento que se incluirá en la instantánea como parte de una transición de vista, asígnale un view-transition-name. Esto es clave para las transiciones de vistas, ya que desbloquea funciones como la transición entre dos elementos diferentes. Cada elemento tiene el mismo valor de view-transition-name a cada lado de la transición, y las transiciones de vista se encargan de todo por ti.

Sin embargo, asignar nombres únicos a los elementos puede resultar engorroso cuando se realiza la transición de muchos elementos que no cambian realmente. Si tienes 100 elementos que se mueven en una lista, debes crear 100 nombres únicos.

Gracias a match-element, no es necesario que hagas todo eso. Cuando se usa este valor para view-transition-name, el navegador generará un view-transition-name interno para cada elemento coincidente según la identidad del elemento.

En la siguiente demostración, se usa este enfoque. Cada tarjeta de la fila recibe un view-transition-name generado automáticamente.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

La tarjeta que entra o sale recibe un nombre explícito. Ese nombre se usa en CSS para adjuntar animaciones específicas a esa instantánea. Las instantáneas de todas las demás tarjetas se diseñan con el view-transition-class asociado a ellas.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

Las Herramientas para desarrolladores ahora muestran reglas que segmentan pseudoclases que usan un view-transition-class

Para depurar las transiciones de vista, puedes usar el panel Animations de las Herramientas para desarrolladores para pausar todas las animaciones. Esto te da tiempo para inspeccionar los seudoelementos sin tener que preocuparte de que la transición de vista alcance su estado final. Incluso puedes desplazarte manualmente por las líneas de tiempo de la animación para ver cómo se desarrollan las transiciones.

Anteriormente, cuando se inspeccionaba uno de los seudoelementos ::view-transition-*, las Herramientas para desarrolladores de Chrome no exponían las reglas dirigidas a los seudoelementos que usaban su conjunto view-transition-class. Esto cambió en Chrome 139, que agregó la funcionalidad.

Los grupos de transición de vistas anidados están disponibles a partir de Chrome 140.

Cuando se ejecuta una transición de vista, se renderizan los elementos capturados en un árbol de seudoelementos. De forma predeterminada, el árbol generado es "plano". Esto significa que se pierde la jerarquía original en el DOM y todos los grupos de transición de vista capturados son hermanos bajo un solo seudoelemento ::view-transition.

Este enfoque de árbol plano es suficiente para muchos casos de uso, pero se vuelve problemático cuando se usan efectos visuales, como el recorte o las transformaciones 3D. Estos requieren cierta jerarquía en el árbol.

Gracias a los "grupos de transición de vistas anidados", ahora puedes anidar pseudoelementos ::view-transition-group entre sí. Cuando los grupos de transición de vistas están anidados, es posible restablecer efectos como el recorte durante la transición.

Más información para usar grupos de transición de vistas

Los seudoelementos ahora heredan más propiedades de animación

Cuando configuras una de las propiedades abreviadas animation-* en un seudoelemento ::view-transition-group(…), los ::view-transition-image-pair(…), ::view-transition-old(…) y ::view-transition-new(…) incluidos también heredan esa propiedad. Esto es útil porque mantiene automáticamente la sincronización del fundido cruzado entre ::view-transition-new(…) y ::view-transition-old(…) con ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Inicialmente, esta herencia se limitaba a animation-duration y animation-fill-mode (y, más tarde, también a animation-delay), pero ahora se extendió para heredar más propiedades abreviadas de animación.

Los navegadores que admiten transiciones de vista ahora deberían tener lo siguiente en su hoja de estilo de agente de usuario:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Los seudoelementos que heredan más propiedades se lanzaron en Chrome 140.

La ejecución de la devolución de llamada de la promesa finished ya no espera un fotograma.

Cuando se usaba la promesa finished para ejecutar una devolución de llamada, Chrome esperaba a que se produjera un fotograma antes de ejecutar esa lógica. Esto podría causar un parpadeo al final de la animación cuando la secuencia de comandos mueve algunos estilos en un intento por conservar un estado visualmente similar.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Este cambio en la sincronización corrige la situación trasladando los pasos de limpieza de la transición de vista para que se ejecuten de forma asíncrona después de que se complete el ciclo de vida. Esto garantiza que el fotograma visual producido en la resolución de la promesa finished aún mantenga la estructura de la transición de vista, lo que evita el parpadeo.

Este cambio de sincronización se lanzó en Chrome 140.

Próximas funciones

Aún no termina el año, así que todavía hay tiempo para lanzar más funciones.

Las transiciones de vista con alcance están listas para probarse en Chrome 140

Las transiciones de vista 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 llamando a element.startViewTransition() (en lugar de document.startViewTransition()) en cualquier HTMLElement.

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.

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.

La función está lista para probarse a partir de Chrome 140 con la marca "Funciones experimentales de la plataforma web" habilitada en chrome://flags. Estamos buscando activamente comentarios de los desarrolladores.

La posición de ::view-transition cambiará de fixed a absolute en Chrome 142

Actualmente, el seudoelemento ::view-transition se posiciona con position: fixed. Según una resolución del CSS Working Group, esto cambiará a position: absolute.

Este cambio de valor de position de fixed a absolute, que se incluirá en Chrome 142, no se puede observar visualmente porque el bloque contenedor del seudoelemento ::view-transition es el bloque contenedor de la instantánea de todos modos. El único efecto observable es un valor de position diferente cuando se realiza una getComputedStyle.

document.activeViewTransition llegará a Chrome 142

Cuando se inicia una transición de vista, se crea una instancia de ViewTransition. Este objeto contiene varias promesas y funcionalidades para hacer un seguimiento del progreso de la transición, así como para permitir manipulaciones, como omitir la transición o modificar sus tipos.

En lugar de requerir que realices un seguimiento manual de esta instancia, Chrome ahora proporciona una propiedad document.activeViewTransition que representa este objeto. Si no hay ninguna transición en curso, su valor es null.

En el caso de las transiciones de vista del mismo documento, el valor se establece cuando llamas a document.startViewTransition. Para las transiciones de vista entre documentos, puedes acceder a esa instancia de ViewTransition en los eventos pageswap y pagereveal.

La compatibilidad con document.activeViewTransition se lanzará pronto en Chrome 142.

Cómo evitar que una transición de vista finalice automáticamente con ViewTransition.waitUntil

Una transición de vista alcanza automáticamente su estado finished cuando finalizan todas sus animaciones. Para evitar este cierre automático, pronto podrás usar ViewTranistion.waitUntil. Cuando se pasa una promesa, el ViewTransition solo alcanzará su estado finished cuando también se resuelva esa promesa pasada.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Este cambio se implementará más adelante este año y permitirá, por ejemplo, esperar un fetch o desbloquear la implementación más sencilla de una transición de vista controlada por desplazamiento.

¿Qué sigue?

Como puedes ver, no hemos estado quietos desde que lanzamos View Transitions en 2023. Esperamos lanzar transiciones de vistas con alcance en el futuro y, como siempre, estamos abiertos a recibir comentarios.

Si tienes alguna pregunta sobre las transiciones de vista, comunícate con nosotros en las redes sociales. Las solicitudes de funciones para las transiciones de vistas se pueden presentar en el WG de CSS. Si encuentras un error, informa un error de Chromium para que lo sepamos.