フロントエンド: element.startViewTransition() で要素スコープの View Transition を同時実行する
document.startViewTransition() はドキュメント全体で1つしか走れず、遷移中はページ操作もポップオーバー表示も邪魔されやすい。list.startViewTransition(...) のように要素単位で始めると、スコープ内だけがアニメし、別リストを同時に動かせる。
どんな問題を解決する？
- 遷移中に
::view-transitionがhtmlを覆い、他のボタンが押せない - 2つ目の遷移を始めると1つ目が途中で打ち切られる
- ポップオーバーなどトップレイヤーの UI がアイテムの下に隠れる
コード例
js
function rotate(list) {
list.append(list.firstElementChild);
}
for (const button of document.querySelectorAll("[data-list]")) {
button.addEventListener("click", () => {
const list = document.getElementById(button.dataset.list);
// document.startViewTransition ではなく、要素にスコープする
list.startViewTransition(() => rotate(list));
});
}css
li {
view-transition-name: match-element; /* 要素ごとに自動命名 */
view-transition-class: item;
}
::view-transition-group(*.item) {
animation-duration: 1s;
}- スコープには自動で
view-transition-name: rootが付く。スコープ自体をスナップショットしたくなければview-transition-name: none。 - コンポーネントが複数あるときの名前衝突は
view-transition-scope: allで探索範囲を閉じ込める。
注意点
- 2026-10 時点で Chrome 147 など。他ブラウザの対応は要確認。
- 同じ要素で遷移中に再呼び出しすると前の遷移はスキップされる（スコープが違うもの同士は同時可）。
display: inlineの span など、レイアウト封じ込めが成立しない要素では開始できない。