VIEW TRANSITION API

並び替えを、瞬間移動で終わらせない

同じDOM更新を、通常の切り替えとmatch-elementで同時に比べます。

対応状況を確認中
01

CHANGE THE ORDER

並び順を選択

LIVE COMPARISON

左は瞬時、右は位置をつなぐ

DEFAULT
WITHOUT

DOM update only

INSTANT
list.replaceChildren(...cards) 位置が瞬時に変わる
WITH

View Transition API

SMOOTH
view-transition-name: match-element 同じ要素を追いかける

並び順を選ぶと、左右が同時に更新されます。

02

CORE CODE

DOM更新をトランジションで包む