滑らかな動き：View Transitions APIで流れるようなインターフェースを構築する

Table of Contents

「ガクガク」するWebの終焉

これまでWeb開発者は、ページ遷移をスムーズに見せるために多大な苦労を強いられてきました。単純なDOMの入れ替えをアニメーションさせるためだけに、Framer MotionやGSAPといった30KBを超えるライブラリをバンドルに詰め込むことも珍しくありませんでした。これは、フレームワーク疲れに陥らずに再利用可能なUIを構築するというWeb標準への回帰と同様、依存関係を減らしブラウザの力を引き出すアプローチです。過去6ヶ月間、いくつかの本番プロジェクトでView Transitions APIを導入した結果、アニメーション関連のコードを約70%削減できることが分かりました。このブラウザ標準機能は、複雑なライフサイクル管理という技術的負債を抱えることなく、アプリのような流動性をもたらします。

ハイエンドなフロントエンド開発において、このAPIの習得はもはや必須と言えます。Webとネイティブアプリの境界線を埋め、唐突なページ切り替えを、ユーザーのコンテキストを維持するエレガントで映画のような動きへと変貌させます。

クイックスタート：5分で最初のトランジションを作成する

View Transitions APIの核心は、document.startViewTransition()メソッドにあります。DOMを更新するコールバック関数をこのメソッドに渡すだけで、あとはブラウザが処理してくれます。ブラウザは現在の状態のスナップショットを撮り、更新を待ち、新しい状態のスナップショットを撮った後、その間をクロスフェードで繋ぎます。

以下は、TanStack Routerなどのモダンなルーターとも相性が良い、シングルページアプリケーション（SPA）での簡潔な実装例です：

function updateDOMContent() {
  const container = document.querySelector('#content');
  container.innerHTML = '<h1>新しいページコンテンツ</h1>';
}

// 機能の有無を確認してトランジションを開始
if (document.startViewTransition) {
  document.startViewTransition(() => updateDOMContent());
} else {
  updateDOMContent();
}

このコードを実行すると、ブラウザはデフォルトで300ミリ秒のシームレスなクロスフェードを生成します。Viteなどで構築した環境であれば、CSSライブラリやキーフレームの定義は不要です。ブラウザが「前」の画像を取得し、ロジックを実行し、「後」の画像を取得して、これら2つの静的なスナップショット間をアニメーション化します。

深掘り：ブラウザの疑似要素ツリー

単純なフェード以上の効果を実現するには、ブラウザがトランジションをどのように表現しているかを理解する必要があります。startViewTransitionを呼び出すと、ブラウザはコンテンツの上に一時的な疑似要素ツリーを生成します。このツリーにより、CSSからトランジションの状態に直接アクセスできるようになります。

::view-transition: 最上位のラッパー。
::view-transition-group(root): サイズ and 位置を管理するコンテナ。
::view-transition-old(root): 変更前の状態の静的なスクリーンショット。
::view-transition-new(root): 変更後の状態のスクリーンショット。

これらの要素をターゲットにすることで、サイトの雰囲気を微調整できます。デフォルトの素早いフェードではなく、1秒間のease-in-outトランジションにしたい場合は、これらの疑似要素に標準のCSSプロパティを適用します：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

これらのアニメーションはブラウザのコンポジターによってハードウェアアクセラレーションされるため、安定した60fpsを維持できます。JavaScriptで手動でDOMを操作したり、ProxyとReflectで構築するリアクティブなロジックでアニメーションを自作したりする場合、このレベルのパフォーマンスを実現するのは困難です。

応用編：要素のモーフィングとMPAのサポート

最も印象的なユースケースは「ヒーローパターン」です。これは、150pxのサムネイルのような小さな要素が、次のページで1080pのヒーローバナーへと拡大・移動しながら変化する演出です。これは view-transition-name プロパティを使用して実現します。

ヒーローアニメーション

遷移元と遷移先の両方の要素に、一致する名前を割り当てます。これにより、ブラウザにこれらが論理的に同一のエンティティであることを伝えます。

/* 商品リスト画面 */
.product-card-img {
  view-transition-name: product-hero;
}

/* 商品詳細画面 */
.product-detail-banner {
  view-transition-name: product-hero;
}

ブラウザは2つの要素間の位置とサイズの差分（デルタ）を計算し、自動的に動きを補間します。かつては複雑な計算と絶対配置が必要だった演出が、わずか2行のCSSで実現可能になります。

マルチページアプリケーション（MPA）

View TransitionsはもはやReactやVueアプリだけのものではありません。Chrome 126以降、WordPress、Django、Railsなどで構築された従来のマルチページアプリケーションでも、CSSだけでトランジションを有効にできるようになりました。グローバルなスタイルシートに以下のルールを追加してください：

@view-transition {
  navigation: auto;
}

これにより、サイト内のリンクをクリックすると、ドキュメント間でネイティブなクロスフェードがトリガーされます。JavaScriptのオーバーヘッドなしで、レガシーなサイトを即座にモダンで高性能なWebアプリのように感じさせることができます。

現場からの実践的な教訓

本番環境への実装を通じて、ドキュメントだけでは気づきにくい細かなニュアンスがいくつか明らかになりました。

1. 視覚効果への過敏症（アクセシビリティ）への配慮

すべてのユーザーが画面の激しい動きを好むわけではありません。前庭疾患を持つユーザーへのアクセシビリティを確保するため、prefers-reduced-motion メディアクエリを尊重してください。リクエストに応じてアニメーションを無効にするシンプルな上書き設定を使用しましょう。

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

2. リストに対する動的な命名

50個のアイテムが並ぶグリッドがある場合、それらすべてに同じ view-transition-name を指定するとアニメーションが壊れてしまいます。代わりに、ユーザーがクリックした際に動的に名前を適用します。これにより、ブラウザは現在遷移している特定の要素のみを追跡するようになります。

function handleItemClick(e) {
  e.target.style.viewTransitionName = 'active-item';
  document.startViewTransition(() => {
    updateUI();
  });
}

3. データの待機

startViewTransition のコールバックは非同期関数をサポートしています。新しいページを表示する前に、DataLoaderなどを活用してAPIからデータを取得する必要がある場合、ブラウザはPromiseが解決されるまで「古い」状態を保持します。これにより、多くのWeb体験を台無しにする「空のコンテンツのフラッシュ」を防ぐことができます。

4. Animationsインスペクターの活用

これらのトランジションの微調整には、適切なツールが不可欠です。Chrome DevToolsで **Animations** ドロワーを開いてください。これにより、トランジションを10%の速度に落としたり、途中で一時停止したりして、疑似要素をインスペクトし、なぜ変形が切れたりずれたりしているのかを正確に把握できます。

View Transitions APIは、UIの演出主導権を開発者からブラウザへと根本的にシフトさせます。基本的なフェードから始め、徐々にヒーロー要素を追加していくことで、パフォーマンスを犠牲にすることなく、プレミアムで洗練されたインターフェースを構築できるでしょう。