Nevermind

View Transitions API でシームレスなページ遷移アニメーションを作る

5 分

1. ページ遷移における体験の隔たり

Web 開発では、長い間ユーザー体験に関する次のようなジレンマがありました。

  • マルチページアプリケーション（MPA）: アーキテクチャは単純で安定していますが、ページを移動するたびに完全な読み込みが発生し、「白い画面」や「ちらつき」によって体験の連続性が失われます。
  • シングルページアプリケーション（SPA）: フロントエンドルーティングによってリロードのない滑らかな体験を実現しますが、開発者は複雑な遷移アニメーション、状態管理、コード分割を手動で扱う必要があり、開発コストが高くなります。

MPA の単純さを保ちながら、SPA の滑らかな遷移も得られる方法はないのでしょうか。View Transitions API は、まさにそのために生まれました。

2. View Transitions API とは？

View Transitions API はブラウザネイティブの API で、異なる二つの DOM 状態の間にアニメーション遷移を簡単に作成する仕組みを提供します。

基本的な処理の流れは非常に単純です。

  1. 遷移を開始すると、API が現在のページ（古い状態）の「スナップショット」を撮ります。
  2. 次に JavaScript で DOM を新しい状態へ更新します。
  3. API が新しいページ（新しい状態）の「スナップショット」も撮ります。
  4. 最後にブラウザが「古いスナップショット」と「新しいスナップショット」の間に、通常はフェードイン・フェードアウトによる滑らかなデフォルト遷移を作ります。

これらはすべてブラウザの内部で効率よく処理されるため、必要なのは単純な関数を一つ呼び出すことだけです。

3. 使い方

シングルページアプリケーションで View Transitions を使うのは非常に簡単です。DOM の更新処理を document.startViewTransition 関数で包むだけです。

// 假设你有一个更新页面内容的函数
async function updatePageContent(url) {
  const response = await fetch(url);
  const newHtml = await response.text();
  // 用新内容替换旧内容 (具体实现取决于你的架构)
  document.body.innerHTML = newHtml;
}

// 在导航链接的点击事件中调用
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();
  const url = event.target.href;

  // 检查浏览器是否支持
  if (!document.startViewTransition) {
    updatePageContent(url); // 不支持则直接更新
    return;
  }

  // 使用 View Transition
  document.startViewTransition(() => updatePageContent(url));
});

これだけで、ページ遷移にデフォルトのフェード効果が加わります。

4. 遷移アニメーションのカスタマイズ

デフォルトのフェード効果も優れていますが、この API の真価はカスタマイズ性にあります。startViewTransition の実行時、ブラウザは次の疑似要素を含む DOM 構造を作成します。

  • ::view-transition: 遷移全体を含むルート要素。
  • ::view-transition-old(root): 古いビューの「スナップショット」。
  • ::view-transition-new(root): 新しいビューの「スナップショット」。

CSS の animation でデフォルト効果を上書きできます。たとえば、次のようなスライドインアニメーションを実装できます。

@keyframes slide-in {
  from { transform: translateX(100%); }
}

::view-transition-new(root) {
  animation: slide-in 0.5s ease-out;
}

5. 要素間の「変形」：view-transition-name

この API で最も驚くべき機能は、二つのページにある 異なる要素 を 同じオブジェクト として認識し、その間に滑らかな「変形」アニメーションを作れることです。

これは CSS プロパティ view-transition-name によって実現されます。

ページ A（一覧ページ）:

<img src="thumbnail.jpg" style="view-transition-name: hero-image;" />

ページ B（詳細ページ）:

<img src="full-size.jpg" style="view-transition-name: hero-image;" />

ページ A からページ B に移動すると、ブラウザは二つの要素の view-transition-name が同じであることを認識します。そして位置、サイズ、形状の差を自動的に計算し、単純なフェードではなく滑らかな遷移アニメーションを生成します。画像やカードなどの要素の遷移に特に適しています。

結論

View Transitions API は、待望されていたネイティブの遷移機能を Web にもたらします。従来は複雑な JavaScript アニメーションライブラリが必要だったインタラクションを大幅に単純化し、映画のように滑らかなアプリケーション体験をかつてないほど簡単に作れるようにします。Astro や Nuxt などのフレームワークへの統合が進み、将来マルチページアプリケーションにも普及すれば、モダン Web 開発者の標準スキルの一つになるでしょう。

CSS View Transitions Animation UX