View Transition API によるスムーズな遷移

Bramus

View Transition API を使用すると、ウェブサイト上のさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、サイトがマルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されているかにかかわらず、ユーザーがサイトを移動する際に、より視覚的に魅力的なユーザー エクスペリエンスを提供できます。

ビュー遷移を使用する一般的な状況は次のとおりです。

• 商品リストページのサムネイル画像は、商品の詳細ページで商品のフルサイズ画像に切り替わります。
• ページ間を移動しても固定されたままのナビゲーション バー。
• フィルタするたびにアイテムの位置が移動するグリッド。

View Transition API で作成された遷移。デモサイトをお試しください。Chrome 111 以降が必要です。

---

ビューの遷移を実装する

ビュー遷移は特定のアプリケーション アーキテクチャやフレームワークに関連付けられておらず、1 つのドキュメントだけでなく、2 つの異なるドキュメント間でトリガーできます。

どちらのタイプのビュー遷移も、同じ構成要素と原則に基づいています。

1. ブラウザは、新旧の状態のスナップショットを作成します。
2. レンダリングが抑制されている間、DOM が更新されます。
3. 遷移は CSS アニメーションによって実現されます。

2 つのタイプの違いは、トリガー方法のみです。

---

同じドキュメント内のビューの遷移

ビュー遷移が 1 つのドキュメントで実行される場合、それは同じドキュメント内のビュー遷移と呼ばれます。これは通常、シングルページ アプリケーション（SPA）で発生します。Chrome 111 以降、同一ドキュメント ビューの移行がサポートされます。

対応ブラウザ

• 111
• 111
• x
• 18

ソース

トリガー方法

document.startViewTransition を呼び出して、同じドキュメント ビュー遷移をトリガーします。

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

例

次のカードの例は、同じドキュメントのビュー遷移を使用して、新しいカードが追加または削除されたときにカードをアニメーション化する SPA です。

カードのデモの録画。Chrome 111 以降が必要です。

構築を開始

同じドキュメント内のビューの遷移について詳しくは、専用のドキュメント ページをご覧ください。

同じドキュメント内のビューの遷移を作成する

---

ドキュメント間のビュー遷移

2 つの異なるドキュメント間でビューの遷移が発生する場合、これはドキュメント間のビューの遷移と呼ばれます。これは MPA では一般的です。Chrome 126 以降では、ドキュメント間のビューの移行がサポートされています。

対応ブラウザ

• 126
• 126
• x
• 

トリガーの方法

クロスドキュメント ビューの遷移は、両方のページがオプトインしている場合、同一オリジンのクロスドキュメント ナビゲーションによってトリガーされます。つまり、ドキュメント間のビュー遷移を開始するために呼び出す API はありません。ユーザーがリンクをクリックすると、そのクリックによってビューの遷移がトリガーされます。

有効にするには、次の CSS スニペットを使用します。

@view-transition {
  navigation: auto;
}

例

次の スタック ナビゲータの例は、2 つの異なるドキュメント間でドキュメント間のビュー遷移を使用する MPA です。ページは、ナビゲーションをさらに深くするか否かに応じて、スタックにプッシュされるか、ポップオフされます。

Stack Navigator のデモの録画。Chrome 126 以降が必要です。

構築を開始

ドキュメント間のビュー遷移について知っておくべきすべての情報をご紹介します。

ドキュメント間のビュー遷移を作成する

注: MPA では、ビューの遷移は単一のドキュメント内（ページ内、アイテムの並べ替えなど）または複数のドキュメント間で発生する可能性があります（ページ間の移動）。