Web APIデモ1件

View Transition API

DOMの更新にアニメーションを適用するAPIです。

View Transition基本デモ

カードのシャッフル・追加・削除を滑らかに繋げます。ON/OFFの切り替えで効果の違いを比較できます。

アイテム 1
アイテム 2
アイテム 3
アイテム 4

View TransitionのON/OFFの切り替えはview-transition-nameをnoneに指定することで行なっています。
View TransitionがONの時は、アイテム番号ごとの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);
}