View Transitions APIを使ったページ遷移アニメーション

View Transitions APIを使うことで、ページ遷移やDOMをいじったときに自動でアニメーションを追加してくれる。

<button type="button" id="update">Update</button>

<img>

const images = [
  'https://user0514.cdnw.net/shared/img/thumb/aig-ai230706397-xl_TP_V.jpg',
  'https://user0514.cdnw.net/shared/img/thumb/reds1230B030_TP_V.jpg',
  'https://user0514.cdnw.net/shared/img/thumb/reds1230B040_TP_V.jpg'
]

const btn = document.querySelector('#update')

let i = 0
btn.addEventListener('click', () => {
  // 画像ソースを切り替え、ランダムでwidthを変更する
  function update() {
    const img = document.querySelector('#image')
    img.width = Math.random() * 500
    img.src = images[i]
    i = ++i % 3
  }

  // View Transitions API
  const transition = document.startViewTransition(() => update());
})

View Transitions API の仕組み

1. 現在のページのスクショを取得
2. startViewTransition で実行したDOM変更が完了したら次へ
3. 新しいページのスクショを取得
4. 旧スクショ Opacity: 1 → 0、新スクショ Opacity: 0 → 1 でクロスフェードする（デフォルト）
5. アニメーション完了

新旧のスクショを基準にクロスフェードするのでDOM構造がごっそり変わってもアニメーションしてくれる。 クロスフェードだけではなく::view-transitionを使うことで多様なアニメーションができる

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

デモ

画像を切替える