公開日: 2026 年 3 月 27 日
Chrome 147 では、要素スコープのビュー遷移が導入されました。この機能を使用すると、Element.startViewTransition() を呼び出して、DOM のサブツリーでビュー遷移を開始できます。
この機能により、複数のビュー トランジションを同時に実行したり、進行中のビュー トランジションをネストしたり、position: fixed コンテンツのレイヤリングの問題を解決したりできます。ページの他の部分はインタラクティブなままです。
変更点
Chrome 140 でデベロッパー テストの準備が整った機能を発表して以来、Google はコミュニティと CSS ワーキング グループと協力して、特にデフォルトの動作に関する詳細を確定しました。
- スコープ ルートはデフォルトで自己参加型です。
- スコープ付きビュー遷移には、ネストされたビュー遷移グループを使用して、ネストされた疑似要素が自動的に含まれます。
- スコープ付きビュー遷移の
::view-transition-group-children()疑似要素は、スコープ ルートがオーバーフローをクリップする場合、そのコンテンツを自動的にクリップします。 - 要素スコープのビュー遷移では、遷移中にスコープ ルートに
contain: layoutとview-transition-scope: allが自動的に適用されます。
これらの更新後、要素スコープのビュー遷移は Chrome Stable バージョン 147 以降で利用できます。
デモ
リストのシャッフル
このデモでは、各リストのアイテムをシャッフルできます。中央のボタンを選択して、リストの位置を入れ替えることもできます。
ライブデモ
デモの記録
要素スコープのビュー遷移が使用されているため、両方のリストでシャッフル ビュー遷移を同時に実行できます。リストアイテムの再編成中にも、リストの位置を入れ替える外側のビュー遷移を開始できます。
パタゴニア旅行
「My Patagonia Trip」デモでは、要素スコープのビュー遷移を示しています。このデモは、「Web UX, re-imagined」キャンペーン動画に基づいて作成されました。
プルダウン を使用して、グリッド アイテムをフィルタします。各グリッド アイテムの [追加] ボタンを使用して、選択したアイテムのリストに追加します。このリストはサイドバー に表示されます。
ライブデモ
デモ全体を表示するには、別のタブで"My Patagonia Trip"を開きます。
デモの記録
このデモでは、要素スコープのビュー遷移が次の 3 か所で使用されています。
- アイテムのフィルタリング時のアイテムのグリッド。
- 選択したアイテムのリストにグリッドのアイテムを追加するとき。
- 選択したアイテムのリストを表示するサイドバー。
ガイドを読む
要素スコープのビュー遷移の詳細については、ガイドをご覧ください。要素スコープのビュー遷移を実装する方法、追加の詳細、その他のデモについて説明します。