このページは Cloud Translation API によって翻訳されました。

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

Bramus

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

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

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

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

ビューの遷移を実装する

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

どちらのタイプのビュー遷移も、まったく同じビルディングブロックと原則に基づいています。

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

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

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

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

対応ブラウザ

ソース

トリガー方法

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 以降でサポートされています。

対応ブラウザ

トリガー方法

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

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

@view-transition {
  navigation: auto;
}

例

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

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

構築を開始

ドキュメント間のビュー遷移について学びます。

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