モーフ遷移（View Transitions）
カードをタップすると、そのサムネがそのまま拡大して詳細へなめらかに変形する。View Transitions APIで一覧⇄詳細をモーフさせる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 一覧⇄詳細で同じサムネが変形する遷移
- モーダルの代わりに位置の連続性を保つ
- 未対応環境で即時切替に落ちてよい画面
- 避ける場面
- 遷移中に操作させたい画面（busy で待つ）
- 同名要素が同時に複数出る一覧
- 構成要素
- カード（サムネと名前）
- 詳細のヒーロー画像
- 見出しと説明
- 一覧へ戻るボタン
- 持っている状態
- 通常
- キーボード
Tab で各カードへ、Enter／Space で詳細を開く（フォーカスは詳細の見出しへ）。詳細では Tab で「一覧へ戻る」、Enter で戻ると元のカードへフォーカスが返る
- 支援技術
カードは button、詳細は hidden 属性の切替で読み上げ対象が入れ替わる。見出しは h3 で開いたらフォーカスを移す。reduced-motion では ::view-transition のアニメを止め即時切替
- 動き
同名 view-transition-name のサムネが一覧→詳細へ 400ms で変形、他はブラウザ既定のクロスフェード。未対応環境は即時切替
デザインの要点
- 変形させたい 2 要素に同じ view-transition-name を付けるだけで、位置と大きさの補間はブラウザがやる。FLIP の計測コードが要らない
- 同名の要素が同時に 2 つあると遷移がエラーで即時切替になる。旧スナップショットの前に元へ、コールバック内で先へ、と付け外す
- 変形は 400ms。既定の 250ms だとサムネが「飛んだ」ように見え、一覧と詳細が同じ物だと伝わりにくい
- ::view-transition のアニメは reduced-motion で自動には止まらない。疑似要素に animation: none を当てて即時切替にする
実装メモ
View Transitions API（document.startViewTransition）で「同一ページ内」の一覧⇄詳細をモーフさせる例です。要になるのは、変形させたい2要素に同じ view-transition-name を付ける点（ここでは一覧サムネと詳細ヒーローに 'vt-hero'）。同名の要素は同時に2つ表示できないため、遷移の前後で付け外ししています。未対応ブラウザでは自動的に即時切り替えにフォールバックします。ページ間（MPA）遷移に使う場合は CSS の @view-transition { navigation: auto; } を併用します。
コード（コピーして使えます）
<div class="vt-root">
<ul class="vt-grid" id="vt-grid">
<li><button class="vt-card" data-i="0"><span class="vt-thumb t0"></span><span class="vt-cap">Aurora</span></button></li>
<li><button class="vt-card" data-i="1"><span class="vt-thumb t1"></span><span class="vt-cap">Sunset</span></button></li>
<li><button class="vt-card" data-i="2"><span class="vt-thumb t2"></span><span class="vt-cap">Ocean</span></button></li>
<li><button class="vt-card" data-i="3"><span class="vt-thumb t3"></span><span class="vt-cap">Forest</span></button></li>
</ul>
<div class="vt-detail" id="vt-detail" hidden>
<span class="vt-thumb vt-thumb-lg" id="vt-hero"></span>
<div class="vt-body">
<h3 id="vt-title">Aurora</h3>
<p id="vt-desc"></p>
<button class="vt-back" id="vt-back">← 一覧へ戻る</button>
</div>
</div>
</div>