デベロッパー テストの準備完了: スコープ付きビューの切り替え

Bramus

公開日: 2025 年 9 月 10 日

スコープ付きビュー遷移は、View Transition API の拡張機能として提案されているもので、DOM のサブツリーでビュー遷移を開始できます。この機能は、chrome://flags で「試験運用版のウェブ プラットフォームの機能」フラグを有効にすることで、Chrome 140 からテストできるようになります。Google では、デベロッパーからのフィードバックを積極的に求めています。

概要説明

スコープ付きビューの切り替えを開始するには、contain: layout が適用された任意の HTMLElement で element.startViewTransition()（document.startViewTransition() ではなく）を呼び出します。

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

結果として、選択した HTMLElement のサブツリーにスコープ設定されたビュー遷移が作成され、その HTMLElement に ::view-transition 疑似ツリーが挿入されます。HTMLElement は、トランジション アニメーションのコンテナとして機能します。

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

スコープ付きトランジションを使用すると、複数のビュー トランジションを同時に実行できます（トランジション ルートが異なる場合）。ポインタ イベントは、ドキュメント全体ではなく、そのサブツリーでのみ防止されます（再度有効にできます）。また、遷移ルート外の要素をスコープ付きビュー遷移の上に描画することもできます。

スコープビューの移行について詳しくは、スコープビューの移行に関する説明をご覧ください。

デモ

次のデモでは、ボタンをクリックしてコンテナ内のドットを移動できます。ドキュメント スコープのビュー遷移または要素スコープのビュー遷移を使用して、動作の違いを確認できます。

ライブデモ

デモの記録

スコープ付きビューの切り替えでは、切り替え中もドットは親によってクリップされたままになります。また、表示されたときにポップオーバーの上にドットが描画されることもありません。

フィードバックを募集しています

ウェブ デベロッパー コミュニティからのフィードバックをお待ちしております。

  • Scoped View Transitions API の形状。
  • 機能がうまく動作したユースケースと、期待どおりに動作しなかったユースケース。
  • 自己参加スコープに関する質問の解決方法。

CSS WG の問題 #9890 にコメントして、フィードバックを共有してください。フィードバックを送信する前に、既知の問題と制約をよく理解してください。

バグが発生した場合は、Chromium バグを報告してください。