View Transitions API 完全ガイド - ネイティブアプリのようなページ遷移をWebで実現

// 基本的な使い方
document.startViewTransition(() => {
  // DOMを更新する処理
  updateTheDOM();
});

function updateContent(newContent) {
  // View Transitions API がサポートされているか確認
  if (!document.startViewTransition) {
    // フォールバック: 通常のDOM更新
    renderContent(newContent);
    return;
  }
 
  // View Transitions を使用
  document.startViewTransition(() => {
    renderContent(newContent);
  });
}

const transition = document.startViewTransition(() => {
  updateDOM();
});
 
// 疑似要素が準備できた時
transition.ready.then(() => {
  console.log('アニメーション開始準備完了');
});
 
// トランジション完了時
transition.finished.then(() => {
  console.log('トランジション完了');
});
 
// トランジションをスキップ
transition.skipTransition();

// View Transitionなし
setCount(count + 1);
 
// View Transitionあり
document.startViewTransition(() => {
  setCount(count + 1);
});

/* トランジション全体の長さを変更 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}
 
/* フェードアウトをカスタマイズ */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
 
/* フェードインをカスタマイズ */
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}
 
@keyframes fade-out {
  to { opacity: 0; }
}
 
@keyframes fade-in {
  from { opacity: 0; }
}

/* 古いコンテンツを左にスライドアウト */
::view-transition-old(root) {
  animation: slide-out-left 0.4s ease-in-out;
}
 
/* 新しいコンテンツを右からスライドイン */
::view-transition-new(root) {
  animation: slide-in-right 0.4s ease-in-out;
}
 
@keyframes slide-out-left {
  to { transform: translateX(-100%); }
}
 
@keyframes slide-in-right {
  from { transform: translateX(100%); }
}

/* リスト内のカード */
.card {
  view-transition-name: card-1;
}
 
/* モーダル内の同じカード */
.modal-card {
  view-transition-name: card-1;
}

{items.map((item) => (
  <div
    key={item.id}
    style={{
      viewTransitionName: selectedId === item.id ? `card-${item.id}` : 'none'
    }}
  >
    {item.content}
  </div>
))}

async function circularTransition(x, y, updateCallback) {
  // 最も遠いコーナーまでの距離を計算
  const endRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y)
  );
 
  const transition = document.startViewTransition(() => {
    updateCallback();
  });
 
  // 疑似要素が準備できたら
  await transition.ready;
 
  // 新しいビューにアニメーションを適用
  document.documentElement.animate(
    {
      clipPath: [
        `circle(0px at ${x}px ${y}px)`,
        `circle(${endRadius}px at ${x}px ${y}px)`
      ]
    },
    {
      duration: 400,
      easing: 'ease-out',
      pseudoElement: '::view-transition-new(root)'
    }
  );
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

{items.map((item) => (
  <div
    key={item.id}
    style={{ viewTransitionName: `item-${item.id}` }}
  >
    {item.content}
  </div>
))}
 
// 操作時
document.startViewTransition(() => {
  setItems(newItems);
});

// グリッド内のサムネイル
<div
  style={{
    viewTransitionName: 
      selectedIndex === index ? `gallery-${item.id}` : undefined
  }}
>
  <img src={item.thumbnail} />
</div>
 
// ライトボックス
{selected && (
  <div
    style={{ viewTransitionName: `gallery-${selected.id}` }}
  >
    <img src={selected.fullsize} />
  </div>
)}

// 選択されたアイテムのみに名前を付ける
style={{
  viewTransitionName: selectedIndex === index 
    ? `gallery-${item.id}` 
    : undefined
}}

@view-transition {
  navigation: auto;
}

// ページを離れる時
window.addEventListener('pageswap', (event) => {
  const transition = event.viewTransition;
  // トランジションをカスタマイズ
});
 
// ページが表示される時
window.addEventListener('pagereveal', (event) => {
  const transition = event.viewTransition;
  // トランジションをカスタマイズ
});

window.addEventListener('pagereveal', (event) => {
  const navigation = performance.getEntriesByType('navigation')[0];
  const from = navigation.activationStart;
  
  // 遷移元のURLに基づいてトランジションをカスタマイズ
});

'use client';
 
import { useCallback } from 'react';
 
export function useViewTransition() {
  const startTransition = useCallback(
    (callback: () => void) => {
      if (!document.startViewTransition) {
        callback();
        return;
      }
      document.startViewTransition(callback);
    },
    []
  );
 
  return { startTransition };
}

function MyComponent() {
  const [view, setView] = useState('list');
  const { startTransition } = useViewTransition();
 
  const switchView = () => {
    startTransition(() => {
      setView(view === 'list' ? 'grid' : 'list');
    });
  };
 
  return (
    <div>
      <button onClick={switchView}>切り替え</button>
      {view === 'list' ? <ListView /> : <GridView />}
    </div>
  );
}

'use client';
 
import { useRouter } from 'next/navigation';
 
export function useViewTransitionRouter() {
  const router = useRouter();
 
  const navigate = (href: string) => {
    if (!document.startViewTransition) {
      router.push(href);
      return;
    }
 
    document.startViewTransition(() => {
      router.push(href);
    });
  };
 
  return { navigate };
}

// SPA View Transitions
if (document.startViewTransition) {
  console.log('View Transitions API がサポートされています');
}
 
// MPA View Transitions
if (window.ViewTransition) {
  console.log('Cross-document View Transitions がサポートされています');
}

function updateWithTransition(updateCallback) {
  if (document.startViewTransition) {
    document.startViewTransition(updateCallback);
  } else {
    updateCallback();
  }
}

const transition = document.startViewTransition(() => {
  updateDOM();
});
 
// 500ms以内に次のアクションがあればスキップ
setTimeout(() => {
  transition.skipTransition();
}, 500);

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

const transition = document.startViewTransition(() => {
  updateDOM();
});
 
transition.finished.then(() => {
  document.querySelector('.main-content')?.focus();
});