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

Bramus

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

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

  • 商品リスティング ページのサムネイル画像。商品の詳細ページではフルサイズの商品画像に切り替わります。
  • あるページから別のページに移動するときに固定されたナビゲーション バーです。
  • フィルタ処理に伴って位置が移動するアイテムを示すグリッド。
<ph type="x-smartling-placeholder">
</ph>
View Transition API で作成された遷移。デモサイトをお試しください。Chrome 111 以降が必要です。

ビュー遷移を実装する

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

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

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

両方のタイプで異なる点は、トリガーする方法です。

同一ドキュメント ビュー遷移

1 つのドキュメントに対して実行されるビューの遷移を「同一ドキュメント ビュー遷移」と呼びます。これは通常、シングルページ アプリケーション（SPA）に当てはまります。Chrome 111 以降、同一ドキュメント ビューの移行がサポートされます。

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

トリガーの方法

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 です。

<ph type="x-smartling-placeholder">
</ph>
カードデモの録画Chrome 111 以降が必要です。

構築を開始

同一ドキュメント ビューの移行に関するすべての知識については、専用のドキュメント ページをご覧ください。

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

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

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

対応ブラウザ

  • Chrome: 126。 <ph type="x-smartling-placeholder">
  • Edge: 126。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

トリガーの方法

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

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

@view-transition {
  navigation: auto;
}

例

次の Stack Navigator の例は、2 つの異なるドキュメント間のビュー遷移を使用する、ドキュメント間のビュー遷移を使用する MPA です。ページを掘り下げるかどうかによって、ページがスタックにプッシュされたり、ポップオフされたりします。

<ph type="x-smartling-placeholder">
</ph>
Stack Navigator のデモの録画Chrome 126 以降が必要です。

構築を開始

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

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