Junya03 | 今月導入した技術『 astro:viewtransitons 』

今月導入した技術『 astro:viewtransitons 』

2025-10-31

最近、「そろそろポートフォリオを新しく作り直したいな」と思っていたのですが、その前に「今のサイトにも気軽に試せる機能がないかな？」と探していたところ、Astro の “View Transitions” 機能を見つけたので試してみました。

そもそも「画面遷移」ってなに？

Web サイトでページを移動するとき、普通は「パッ」と画面が切り替わりますよね。でも最近のサイト（特にポートフォリオやブランドサイト）では、ページがふわっとフェードしたり、スライドするように切り替わる演出がよく見られます。これが「画面遷移アニメーション（View Transition）」です。

以前はこういう動きをつけるために Barba.js などの専用ライブラリを使ったり、React や Vue などを導入したりする必要がありました。でも、Astro の astro:viewtransitions を使えば、とても簡単に導入できるんです！

実際に使ってみる

astro:viewtransitionsを読み込むだけで準備 OK です。

---
import { ClientRouter } from 'astro:transitions';
---

<html>
  <head>
    <ClientRouter />
  </head>
  <body>
    <slot />
  </body>
</html>

これをレイアウトファイル（例：Layout.astro）に追加すると、Astro がページ遷移を自動で検知して、アニメーションを行ってくれるようになります。

アニメーションの連携

特定の画像や文字をアニメーションで「つなげたい」ときは、transition:name という属性を使います。

<Image
  src={AboutImage}
  alt="About image"
  transition:name="aboutImage"
/>

すると、「前のページ」と「次のページ」で同じ transition:name を持つ要素が、自然にアニメーションしながら切り替わるようになります。

例えばトップページにある画像が、“About ページ” に行くときにスッとズームして移動する…みたいな表現も可能です。

このサイトではブログ一覧画像とブログ記事のトップ画像が連動してアニメーションするような設定にしています。

ページ読み込み時の制御について

もしページ遷移後に特定のスクリプトを実行したい場合は、 astro:transitionsが提供しているpage-loadイベントを使うと便利です。

これは「ページのトランジションが完全に終わったあと」に実行されるイベントで、アニメーション完了後に DOM 操作や初期化処理を行いたいときに使えます。

//- js
document.addEventListener('astro:page-load', () => {
  console.log('ページの読み込みとアニメーションが完了しました');
  // ここに実行したい処理を記述
});

DOMContentLoaded や load イベントと違って、 Astro のページ遷移にも対応しているのがポイントです。

（ClientRouter や ViewTransitions）

実装するうえでの注意点

動きを少なくする設定について

ユーザーが OS やブラウザの設定で「動きを減らす（reduce motion）」を有効にしている場合、View Transitions のアニメーションは自動的に無効化されます。

これはアクセシビリティの観点から、Astro 側がユーザーの設定を尊重して動作を止めるためです。そのため、開発中に「なぜかアニメーションが出ない…？」という場合は、ご自身の OS 設定を一度確認してみるのもおすすめです。（私がそれでした）

（Mac の場合は「システム設定 → アクセシビリティ → 視差効果 → 視差効果を減らすをオフ」）

スマホでの戻るスワイプについて

ひとつ注意点として、スマートフォンの「戻るスワイプ操作」を使った場合は、View Transitions のアニメーションは動作しません。

これらの操作はブラウザや OS がネイティブで制御しているため、Astro 側でページ遷移を検知できない仕様になっています。そのため、「リンククリック時には動くけど、スワイプでは動かない」という挙動が見られます。

使ってみた感想

「こんなに簡単にできるの！？」というのが正直な感想です。コードの変更も少なく、ページ遷移の動きがすごく自然になります。特にポートフォリオサイトのように、見た目の印象を大切にしたいサイトにぴったりです。今回この記事に書いたもので簡単に実装ができるので、とても学習コストも少なかったように感じます。Astro がある程度触れることのできる人にはぜひ触っていただきたい機能でした。

次のポートフォリオサイトではこちらのastro:transitionsを用いた画面遷移にもチャレンジして行きたいと思います。

最後に

技術系の記事が増えてきているのは、単純に今の自分が一番夢中になっていることだからかもしれません。来月は少し肩の力を抜いて、日々感じたことや考えていることも書いていけたらと思っています。

その頃にはデザインが変わっているかも？いや、また別の技術を試してるだけかもしれません…笑

今月も最後まで読んでいただきありがとうございました。それではまた。

今月導入した技術 『 astro:viewtransitons 』