Enable Transitions in Astro
From the Astro cheat sheet · View Transitions · verified Jul 2026
Enable Transitions
astro
---
// Layout.astro
import { ClientRouter } from 'astro:transitions';
---
<html>
<head>
<ClientRouter />
</head>
<body>
<slot />
</body>
</html>✅ ClientRouter enables SPA-like navigation with animations
💡 Built-in animations: fade (default), slide, none, initial
🔍 transition:name pairs elements between old/new pages
⚡ transition:persist keeps elements across navigation
transitionsClientRouteranimationsspa