View transitions, same document (document.startViewTransition)

Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline enero de 2026. Tipos de view transition: Chrome 125, Safari 18.2, Firefox 147.

Chrome 111Edge 111Safari 18Firefox 144

Envuelve un cambio del DOM en `document.startViewTransition()` y el navegador anima entre el estado viejo y el nuevo; los elementos con el mismo `view-transition-name` se transforman entre posiciones. Transiciones de elemento compartido con una línea de JS.

CSS

.fx-027-grid {
  display: flex;
  gap: 12px;
  margin-top: 12px
}
.fx-027-a,.fx-027-b {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font: 700 24px system-ui
}
.fx-027-a {
  background: #2563eb;
  view-transition-name: fx-027-a
}
.fx-027-b {
  background: #ec4899;
  view-transition-name: fx-027-b
}
.fx-027.alt .fx-027-grid {
  flex-direction: row-reverse
}
::view-transition-group(*) {
  animation-duration: .4s
}
:root:active-view-transition .fx-027 button {
  pointer-events: none
}
.fx-027 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-027">
  <button onclick="document.startViewTransition(()=>document.querySelector('.fx-027').classList.toggle('alt'))">Swap</button>
  <div class="fx-027-grid"><div class="fx-027-a">A</div><div class="fx-027-b">B</div></div>
</div>

Fallback: Llama al callback directamente cuando `!document.startViewTransition`; el cambio ocurre sin animación.

Fuente: web.dev/blog/baseline-digest-jan-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/144

Prompt

Anima los cambios de estado con la View Transition API: da a cada elemento que deba transformarse un `view-transition-name` único, envuelve la actualización del DOM en `document.startViewTransition(() => update())` (con una llamada directa como respaldo) y ajusta el movimiento con `::view-transition-old/new(name)` y `::view-transition-group(*) { animation-duration }`. Usa `:root:active-view-transition` para deshabilitar la interacción mientras se ejecuta.