2つのビュー間での共通要素トランジション

共通要素モーフの仕組み

変更前後のスナップショットで 異なる DOM 要素 が同じ view-transition-name を共有していると、ブラウザが位置・サイズ・コンテンツを自動で補間します。これが View Transitions API のキラー機能です。

<!-- リストビュー -->
<a href="#detail" class="card" style="view-transition-name: hero">
  <img src="thumb.jpg" />
</a>

<!-- 詳細ビュー -->
<div class="hero" style="view-transition-name: hero">
  <img src="full.jpg" />
</div>

document.startViewTransition(() => switchToDetailView()) を呼ぶと、ブラウザは hero が両スナップショットに存在することを認識し、両方のバウンディングボックスをキャプチャしてその間をアニメーションします。<img> のソース URL が異なる場合はコンテンツのクロスフェードも含まれます。

アイテムごとに固有の名前を生成

リストでは全アイテムに view-transition-name: card を再利用できません。スナップショット内で名前は一意でなければならないからです。動的に生成します:

.card {
  view-transition-name: var(--card-name);
}

<div class="card" style="--card-name: card-42">...</div>

レイヤートランジション：hero + コンテナ

共通要素モーフと周辺のクロスフェードを組み合わせられます。hero に名前を付け、ページの残りをルートグループ経由でクロスフェードさせれば、ブラウザが両方を1回の協調トランジションで指揮します。

パフォーマンス予算

各 named 要素はスナップショットグループを作り、メモリと別個のコンポジターレイヤーを消費します。中位機種のモバイルでもスムーズに動かすには、トランジションあたりの named 要素を 20個未満 に抑えてください。