CSS View Transitionsでページ遷移アニメーションを実装する方法【SPA/MPA両対応】

// DOM更新をView Transitionでラップする
document.startViewTransition(() => {
  // ここでDOMを更新する
  updateContent();
});

// async/awaitパターン
document.startViewTransition(async () => {
  const data = await fetchNewContent();
  document.getElementById("main").innerHTML = data;
});

const transition = document.startViewTransition(() => {
  updateContent();
});

// アニメーション完了を待つ
await transition.finished;
console.log("遷移完了！");

/* 遷移元・遷移先の両方のページに記述 */
@view-transition {
  navigation: auto;
}

/* ヘッダーは個別にアニメーション */
.header {
  view-transition-name: main-header;
}

/* メインコンテンツも個別に */
.main-content {
  view-transition-name: content;
}

/* カード要素にもユニークな名前を付ける */
.card-1 {
  view-transition-name: card-1;
}
.card-2 {
  view-transition-name: card-2;
}

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)    ← 遷移前のスナップショット
│     └─ ::view-transition-new(root)    ← 遷移後のライブ表示
├─ ::view-transition-group(main-header)
│  └─ ::view-transition-image-pair(main-header)
│     ├─ ::view-transition-old(main-header)
│     └─ ::view-transition-new(main-header)
...

/* 古い状態はフェードアウト */
::view-transition-old(content) {
  animation: 0.3s ease-out fade-out;
}

/* 新しい状態はフェードイン */
::view-transition-new(content) {
  animation: 0.3s ease-in fade-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* MPA: View Transitionを有効化 */
@view-transition {
  navigation: auto;
}

/* メインコンテンツに名前を付ける */
.main-content {
  view-transition-name: content;
}

/* フェードクロスのカスタマイズ */
::view-transition-old(content) {
  animation: 0.4s ease-out both fade-and-scale-out;
}

::view-transition-new(content) {
  animation: 0.4s ease-in both fade-and-scale-in;
}

@keyframes fade-and-scale-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes fade-and-scale-in {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
}

<!-- 一覧ページ -->
<div class="card-grid">
  <a href="/detail/1" class="card">
    <img src="/img/photo1.jpg" class="card-image"
         style="view-transition-name: hero-image-1">
    <h3 class="card-title"
        style="view-transition-name: hero-title-1">記事タイトル</h3>
  </a>
</div>

<!-- 詳細ページ -->
<article class="detail">
  <img src="/img/photo1.jpg" class="detail-image"
       style="view-transition-name: hero-image-1">
  <h1 class="detail-title"
      style="view-transition-name: hero-title-1">記事タイトル</h1>
  <p>本文がここに入ります...</p>
</article>

@view-transition {
  navigation: auto;
}

/* 画像の遷移: ゆったりとしたイージング */
::view-transition-group(hero-image-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* タイトルの遷移 */
::view-transition-group(hero-title-1) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 残りのコンテンツはフェードイン */
::view-transition-new(root) {
  animation: 0.3s ease-in fade-in;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@view-transition {
  navigation: auto;
}

.main-content {
  view-transition-name: content;
}

/* 「進む」遷移: 右から左にスライド */
::view-transition-old(content) {
  animation: 0.35s ease-in-out both slide-out-left;
}

::view-transition-new(content) {
  animation: 0.35s ease-in-out both slide-in-right;
}

@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
}

function navigate(url, direction = "forward") {
  // 方向に応じてクラスを設定
  document.documentElement.dataset.direction = direction;

  document.startViewTransition(async () => {
    const res = await fetch(url);
    const html = await res.text();
    document.querySelector(".main-content").innerHTML = html;
  });
}

/* 「戻る」ときは逆方向 */
[data-direction="back"] ::view-transition-old(content) {
  animation-name: slide-out-right;
}

[data-direction="back"] ::view-transition-new(content) {
  animation-name: slide-in-left;
}

@keyframes slide-out-right {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
}

// 機能検出
if (document.startViewTransition) {
  document.startViewTransition(() => updateContent());
} else {
  // フォールバック: アニメーションなしで更新
  updateContent();
}

/* アニメーションを軽減したいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  /* View Transitionのアニメーションを無効化 */
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }
}

/* より丁寧なアプローチ: 完全に消すのではなく控えめにする */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01s !important;
  }
  
  /* スライドは無効にして、フェードだけ残す */
  ::view-transition-old(content) {
    animation: 0.15s ease-out fade-out;
  }
  ::view-transition-new(content) {
    animation: 0.15s ease-in fade-in;
  }
}