Un fin de semana dentro de View Transitions

Quería exactamente una cosa de astro:transitions: un cross-fade suave entre la página principal y una página de artículo, para que navegar no se sintiera como una recarga dura aunque, técnicamente, no se mantuviera nada vivo entre navegaciones. No esperaba que esto tomara un fin de semana.

Activarlo es la parte fácil

Poner <ClientRouter /> en el layout tomó unos treinta segundos y produjo una transición de página de inmediato. También produjo una transición en cada elemento con un id compartido, la mayoría de los cuales no había sido intencional —el wordmark del header se deslizaba en lugar de hacer cross-fade, y un id de heading duplicado por accidente hizo que dos elementos sin relación se transformaran uno en el otro durante un cuadro muy raro.

---
import { ClientRouter } from 'astro:transitions';
---
<ClientRouter />

Acotándolo

El arreglo fue ser deliberado sobre qué elementos realmente reciben un transition:name, en lugar de dejar que el router infiera elementos compartidos a partir de ids coincidentes:

• El título del artículo recibe un transition:name explícito para que se sienta continuo entre la tarjeta y la página de artículo.
• Todo lo demás recibe transition:animate="fade" explícitamente, o nada en absoluto, para que no intente ser inteligente con elementos que simplemente comparten markup.
• El header y el footer se excluyen por completo con transition:persist, ya que son idénticos en cada página y volver a animarlos es puro desperdicio.

Respetando el ajuste que más importa

Nada de esto vale mucho si ignora prefers-reduced-motion. El router de Astro lo respeta por defecto para sus propias transiciones, pero yo había agregado encima algunas transiciones CSS propias, y esas necesitaban una media query explícita:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Un fin de semana por un solo cross-fade suena como un mal trueque hasta que me acuerdo qué reemplazó: un flash blanco completo entre cada página, que es el tipo de cosa que los lectores sienten incluso cuando no pueden explicar por qué un sitio se siente más lento de lo que mide.