Astro View Transitions
The View Transitions API provides a way to animate between different DOM states while updating the DOM content in a single step.
Usage in Astro
Astro makes this incredibly simple. Just import the component in your layout:
```astro
import { ViewTransitions } from ‘astro:transitions’;
Naming Transitions
To animate specific elements (like a persistent video player or a header image), assign a `transition:name`:
```css
.header-image {
view-transition-name: hero-image;
}
```
Lifecycle Events
You can hook into the navigation lifecycle:
```javascript
document.addEventListener(‘astro:page-load’, () => {
console.log(‘New page loaded!‘);
});
document.addEventListener(‘astro:before-preparation’, (ev) => {
console.log(‘Navigation starting to’, ev.to);
});
```
This enables Single Page Application (SPA) feel with Multi Page Application (MPA) architecture.