Astro View Transitions でネイティブアプリのような遷移を実現する

Webサイトのページ遷移を、ネイティブアプリのように滑らかにしたいと思ったことはありませんか？ Astroの View Transitions を使えば、驚くほど簡単に実装できます。

導入はたったの2ステップ

まず、Layoutファイルの <head> 内でコンポーネントを呼び出します。

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
    <ViewTransitions />
</head>

これだけで、ページ遷移がフェードアニメーションになります。ブラウザの履歴移動（戻る/進む）もスムーズです。

さらに、一覧ページと詳細ページで同じ画像を transition:name で紐付けると、画像がページを跨いで移動するようなアニメーションが自動生成されます。

一覧ページ (Index)

<img src={post.heroImage} transition:name={`hero-${post.slug}`} />

詳細ページ (Slug)

<img src={post.heroImage} transition:name={`hero-${post.slug}`} />

たったこれだけで、ユーザー体験（UX）が劇的に向上します。「Webサイト」というより「アプリ」を作っている感覚になれるので、ぜひ試してみてください。