Una de las cosas más bonitas de las SPA modernas son las transiciones suaves entre páginas: el contenido se desvanece, se desliza, persiste entre navegaciones. Astro te da exactamente eso, manteniendo el modelo MPA (cada página es una página real) y añadiendo solo unas decenas de KB de runtime.
Por debajo, usa la View Transitions API del navegador.
Tan fácil como meter un componente en el <head> de tu layout:
Nota histórica: en versiones antiguas de Astro este componente se llamaba
ViewTransitions. La API actual lo renombró aClientRouter(más explícito sobre lo que hace: enrutar en cliente). Si trabajas en un proyecto antiguo,ViewTransitionsaún funciona como alias.
A partir de aquí, todas las navegaciones internas del sitio usan transiciones. Sin tocar enlaces, sin cambiar de mentalidad.
Puedes controlar qué se anima y cómo con la directiva transition:name y transition:animate:
Si la siguiente página tiene otro elemento con transition:name="titulo", el navegador anima la transición entre ambos (por ejemplo, lo desliza desde su posición original a la nueva).
Es muy potente para listas → detalle: el thumbnail "vuela" hacia la página del detalle.
Astro trae:
transition:animate="fade" → desvanecimiento.transition:animate="slide" → deslizamiento.transition:animate="initial" → recreación instantánea (sin animar).Con transition:persist, un elemento sobrevive a la navegación: muy útil para reproductores de música, contadores, cualquier cosa que no quieras reiniciar al cambiar de ruta.
El router emite eventos como astro:before-preparation, astro:after-swap, astro:page-load... Útiles para reinicializar widgets de terceros tras cada navegación:
Abre src/layouts/BaseLayout.astro.
astro:transitions (acepta ClientRouter o ViewTransitions, los dos pasan los validadores).<head> del layout.Eso es todo: cualquier página que use este layout obtiene transiciones suaves entre navegaciones internas. Una de las relaciones esfuerzo/resultado más golosas de Astro.