← カテゴリ一覧に戻る

View Transitions API

document.startViewTransition view-transition-name ::view-transition

このページでは、View Transitions APIを使ったクロスフェード・Shared Element・スライドアニメーションのインタラクティブなデモを確認できます。

デモ1：基本のクロスフェード

document.startViewTransition() でDOM更新をラップすると、変化前後のスナップショットが自動取得されクロスフェードが入ります。

🌊
コンテンツ A
波の音が心地よい夏の海辺。

✅ チェックあり：startViewTransition() でクロスフェード　／　チェックなし：即時切り替え

デモ2：Shared Element Transition

view-transition-name を使って、変化前後の要素を「同一要素」として扱いアニメーションします。

🌸
桜の風景
春の彩り
🌊
夏の海
青の世界
🍁
秋の紅葉
燃える紅

カードをクリックすると view-transition-name を持つ要素が位置・サイズをアニメーションしながら展開します

デモ3：スライドイン遷移

::view-transition-old / ::view-transition-new でアニメーションをカスタマイズし、スライド方向を前後で切り替えます。

1️⃣

はじめの一歩

View Transitions APIを使うと、SPA内の画面遷移をなめらかにできます。

1 / 4

方向に応じて ::view-transition-old/new の CSS を切り替えることでスライド方向を制御します

コード例

js
// ✅ 基本の使い方
document.startViewTransition(() => {
  // DOM を更新する処理
  updateContent();
});

// 非同期処理も対応
document.startViewTransition(async () => {
  const data = await fetchNewContent();
  renderContent(data);
});

// ✅ ブラウザ対応チェック（フォールバック）
if (document.startViewTransition) {
  document.startViewTransition(() => updateUI());
} else {
  updateUI(); // フォールバック：通常更新
}

// ✅ Shared Element Transition（要素を共有）
// HTML側：
// <div style="view-transition-name: card-1">...</div>
// JS側：
element.style.viewTransitionName = 'card-hero';
document.startViewTransition(() => {
  element.style.viewTransitionName = ''; // 更新後はリセット
  showDetail();
});

// ✅ CSS でトランジションをカスタマイズ
/*
  @keyframes slide-in {
    from { transform: translateX(100%); }
  }
  @keyframes slide-out {
    to { transform: translateX(-100%); }
  }

  ::view-transition-old(root) {
    animation: slide-out 0.3s ease;
  }
  ::view-transition-new(root) {
    animation: slide-in 0.3s ease;
  }
*/

比較：View Transitions API vs CSS アニメーション単体

観点View Transitions APICSS アニメーション単体
変化前後の同時表示✅ 自動でスナップショット取得❌ 手動で古い状態を保持する必要あり
Shared Element✅ view-transition-name で指定❌ 複雑な実装が必要
非同期処理対応✅ async/await 対応❌ タイミング制御が難しい
ブラウザ対応⚠️ Chrome 111+ / Safari 18+ / Firefox 未対応✅ 全ブラウザ
SPA での利用✅ React の状態更新と組み合わせ可能✅

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- document.startViewTransition() を使って要素の切り替えにクロスフェードアニメーションを付与する
- view-transition-name を使った Shared Element Transition のデモを含める（カード→詳細への展開）
- ::view-transition-old / ::view-transition-new を CSS でカスタマイズしてスライドアニメーションを実装する
- ブラウザが未対応の場合のフォールバック処理（document.startViewTransition の存在チェック）を含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧Zenn☕ Buy Me a Coffee
© UI Memo