View Transitions

<!doctype html>
<meta charset="utf-8">
<title>View Transitions · ejemplo mínimo</title>
<style>
  /* Entre páginas del mismo origen: basta con esta regla en las dos páginas */
  @view-transition { navigation: auto; }

  ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
  li { width: 80px; height: 80px; display: grid; place-items: center; background: #c0643a; color: #fff; font: 600 24px system-ui; }
  /* Cada elemento anima por su cuenta; la clase permite darles a todos la misma curva */
  li { view-transition-name: match-element; view-transition-class: card; }
  ::view-transition-group(.card) { animation-duration: 0.4s; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  }
</style>
<p><button id="shuffle">Barajar</button> · <a href="pagina-2.html">Ir a la página 2 (transición entre documentos)</a></p>
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
<script>
  const list = document.querySelector('#list');
  const shuffle = () => [...list.children].sort(() => Math.random() - 0.5).forEach((li) => list.append(li));
  document.querySelector('#shuffle').onclick = () => {
    // Sin soporte, el cambio se hace igual, sin animación
    if (!document.startViewTransition) return shuffle();
    document.startViewTransition(shuffle);
  };
</script>

<!doctype html>
<meta charset="utf-8">
<title>View Transitions · página 2</title>
<style>
  @view-transition { navigation: auto; }
  h1 { font: 600 32px system-ui; }
</style>
<h1>Página 2</h1>
<p>Esta navegación ha usado una transición entre documentos (Chrome 126+, Safari 18.2+).</p>
<p><a href="index.html">Volver</a></p>