Cross-document View Transitions: el CSS que reemplaza al router

Estaba revisando si podía sacar el componente ClientRouter de un proyecto Astro estático que no necesita preservar estado JS entre páginas. La respuesta: sí, con una sola regla en el CSS global.

@view-transition {
  navigation: auto;
}

Eso es todo. El browser intercepta la navegación, captura el estado visual del documento actual, carga el siguiente en background y ejecuta un cross-fade nativo. Sin JavaScript, sin router, sin configuración extra. Todos los browsers modernos lo soportan; Baseline 2026.

Transiciones de elementos específicos entre páginas

Lo más poderoso no es el fade global, sino el morphing de elementos compartidos. Si el mismo view-transition-name existe en ambos documentos, el browser anima la transición entre esos nodos automáticamente:

/* Listado de posts */
.post-card img {
  view-transition-name: post-hero;
}

/* Página de detalle */
.hero-image {
  view-transition-name: post-hero;
}

El nombre actúa como ancla entre los dos documentos. El browser detecta el par y construye la animación solo. Ningún JavaScript involucrado.

¿Cuándo sigue siendo necesario el ClientRouter?

Si venías usando el ClientRouter solo por las animaciones de entrada y salida de página, este CSS las reemplaza sin costo. El trade-off concreto lo encontrás en el TIL de ClientRouter en Astro 6. Si las transiciones no aparecen en móvil, el TIL de debugging de View Transitions en móviles tiene el sistema de diagnóstico.