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

Bramus

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

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

  • 商品リスト ページに表示されるサムネイル画像。商品詳細ページでは、この画像がフルサイズの商品の画像に切り替わります。
  • ページ間を移動しても固定されたままのナビゲーション バー。
  • フィルタリングするとアイテムの位置が移動するグリッド。
View Transition API で作成されたトランジション。デモサイトをお試しください。Chrome 111 以降が必要です。

ビューの切り替えを実装する

ビューの切り替えは特定のアプリケーション アーキテクチャやフレームワークに結び付けられておらず、単一のドキュメントだけでなく、2 つの異なるドキュメント間でもトリガーできます。

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

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

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

同じドキュメント内のビューの切り替え

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

トリガー方法

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

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

トリガー方法

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

オプトインするには、次の CSS スニペットを使用します。

@view-transition {
  navigation: auto;
}

例

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

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

構築を開始

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

ドキュメント間のビュー遷移を構築する