Step
9/10
Smooth as silk
Make it feel like an app, not a stack of HTML.
Click between any two pages on your site. Notice the blink ? Browser tears the old page down, builds the new one. Looks like 1998.
Add one component to your Layout's <head> and the blink becomes a smooth fade :
✦ src/layouts/Layout.astro
read-only
1
2
3
4
5
6
7
8
9
10
11
12
13
---
import { ClientRouter } from "astro:transitions";
---
<!doctype html>
<html lang="en">
<head>
<ClientRouter />
</head>
<body>
<slot />
</body>
</html>That's it. Every link click now uses the browser's navigation API instead of a full reload. Scroll position is preserved. CSS animates between states. The site starts feeling like a product.
For the showstopper move, tag elements that appear on both pages with the same transition:name . They'll morph between routes:
✦ across two files
read-only
1
2
3
4
5
6
7
8
// in your crew card:
<a href="{`/crew/${name}`}">
<img src="{avatar}" transition:name="{`avatar-${name}`}" />
<h2>{name}</h2>
</a>
// in the profile page:
<img src="{avatar}" transition:name="{`avatar-${name}`}" />An astronaut's avatar on the crew page flies into position on their profile page. Click around your site. You earned that smile.
— page 9 —