view-transition-name を付けた要素だけ、既定の 250ms のままだった

遷移そのものの長さは指定していました。指定が無いとブラウザ既定の短いクロスフェードになり、白い紙面から暗いページへの切り替わりが唐突に見えるためです。

ところが、一覧のスクリーンショットが次のページの端末画像へ変形して繋がる、という一番目立つ動きだけが速い。指定はしているのに効いていませんでした。

view-transition-name を持つ要素は、root のスナップショットから除かれます。つまり root に当てた指定は、その要素に届きません。

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 440ms;   /* これだけだと名前付きの要素に届かない */
}

結果、名前を付けた要素だけがブラウザ既定の 250ms のまま残っていました。画面の端から端へ移動して形まで変わる動きが、サイトの中でいちばん短い、という状態です。

(*) は名前付きも root も含みます。両方に長さを与えたうえで、root だけを変えたいならその後ろに書きます。順番で決まります。

/* (*) は名前付きも root も含む。(root) は必ずこの後ろに置く —— 順番で決まる */
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 440ms; }

::view-transition-old(root),
::view-transition-new(root) { /* root だけの指定 */ }

同じ仕組みでもう1つ壊しました。view-transition-name を持つ要素と、それを包む要素に、opacity から始まる入場アニメーションを当てていたときです。

その入場は遅延 180ms ＋ 所要 620ms で計 800ms。一方、遷移の待ち時間は 700ms でした。スナップショットが撮られる時点で包みがまだ透明なので、変形の行き先が消えます。