カードのシャッフル・追加・削除を滑らかに繋げます。ON/OFFの切り替えで効果の違いを比較できます。
view-transition-nameをnoneに指定することで行なっています。view-transition-nameを持ちます(例: item-1)。view-transition-class: item;を持ちます。::view-transition-group(.item) {
border-radius: var(--radius-md);
}
::view-transition-group(item-1) {
background-color: var(--red-800);
}
::view-transition-image-pair(item-2) {
background-color: var(--pink-800);
}
::view-transition-old(item-3) {
background-color: var(--purple-800);
}
::view-transition-new(item-4) {
background-color: var(--cyan-800);
}