# Fabiensalles Claude Marketplace Astro View Transitions
> Astro View Transitions
- Skill: `tomevault-io/fabiensalles-claude-marketplace-astro-view-transitions` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/fabiensalles-claude-marketplace-astro-view-transitions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/fabiensalles-claude-marketplace-astro-view-transitions/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/fabiensalles-claude-marketplace-astro-view-transitions
---
# Astro View Transitions
Patterns for smooth page transitions and SPA-like navigation in Astro.
## Setup
Add the `` component to your layout:
```astro
---
import { ViewTransitions } from 'astro:transitions';
---
```
## How It Works
With View Transitions enabled:
1. User clicks a link
2. Astro fetches the new page in background
3. Browser animates between old and new content
4. URL updates without full page reload
## Transition Directives
### `transition:name` - Identify Elements
```astro
...
{post.data.title}
```
### `transition:animate` - Animation Type
| Animation | Description |
|-----------|-------------|
| `fade` | Crossfade (default) |
| `slide` | Slide in from side |
| `none` | No animation |
| `initial` | Only animate on first load |
### `transition:persist` - Keep Elements Across Navigations
```astro
```
## Force Full Reload with `data-astro-reload`
Use `data-astro-reload` to force a full page reload on specific links. Use cases: language switching, theme changes, auth state changes.
```astro
EN
```
> **When implementing custom animations, persist patterns, or loading indicators**, read `references/transition-patterns.md` for complete examples with CSS keyframes and lifecycle events.
## Lifecycle Events (in order)
| Event | When |
|-------|------|
| `astro:before-preparation` | Navigation started |
| `astro:after-preparation` | New page fetched |
| `astro:before-swap` | Before DOM swap |
| `astro:after-swap` | After DOM swap |
| `astro:page-load` | Fully complete |
Use `astro:page-load` to re-initialize scripts after navigation.
## Fallback
View Transitions degrade gracefully to full page loads in unsupported browsers.
## Quick Reference
| Directive/Attribute | Purpose |
|---------------------|---------|
| `transition:name` | Identify element for morphing |
| `transition:animate` | Set animation type |
| `transition:persist` | Keep element across navigations |
| `data-astro-reload` | Force full page reload |
| `data-astro-prefetch` | Prefetch on hover/view |
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/FabienSalles) — claim your Tome and manage your conversions.