view-transitions

ビュートランジション

Agent Skills™ の一部（googleadsagent.ai™ 提供）

説明

ビュートランジションは、UI の状態やルート間をシームレスにアニメーションで遷移させる React View Transition API を実装します。このスキルでは、<ViewTransition> コンポーネント、遷移を分類する addTransitionType、アニメーションを制御する CSS 疑似要素、ルートをまたいだ共有要素の遷移、Next.js App Router との統合について説明します。

ビュートランジションを使うと、Web アプリケーションをネイティブアプリより見劣りさせる、ページ間のぎこちない切り替わりを解消できます。遷移前の状態のスナップショットを取得し、遷移後の状態とクロスフェードすることで、ブラウザーはスムーズな視覚的連続性を生み出し、ナビゲーション中もユーザーのコンテキストを保ちます。React の実装は並行レンダリングモデルと連携するため、遷移を中断したり、優先順位を付けたりできます。

共有要素の遷移では、これをさらに発展させ、一覧ページのサムネイルが詳細ページの大きなヒーロー画像へと変化し、ルート変更をまたいでも視覚的な同一性を保ちます。CSS の view-transition-name プロパティによって要素間の関連を設定すると、ブラウザーが自動的に補間を処理します。

使用する場面

• React または Next.js アプリケーションでルート間を移動する場合
• 共有要素を使って、一覧から詳細への遷移をアニメーション化する場合
• ページコンテンツに表示・終了アニメーションを追加する場合
• 方向に応じたアニメーションで戻る／進むナビゲーションを実装する場合
• ユーザーがスムーズなページ遷移や「ネイティブのような」操作感を求めている場合
• 手動の FLIP アニメーションの実装を置き換える場合

仕組み

sequenceDiagram
    participant User
    participant React
    participant Browser
    participant CSS

    User->>React: Navigate to new route
    React->>Browser: startViewTransition()
    Browser->>Browser: Capture old state snapshot
    React->>React: Update DOM (concurrent)
    Browser->>Browser: Capture new state snapshot
    Browser->>CSS: Apply ::view-transition pseudo-elements
    CSS->>Browser: Animate old → new
    Browser->>User: Smooth transition rendered

ブラウザーが遷移のライフサイクルを制御します。スナップショットの取得、DOM の更新、クロスフェードアニメーションの順に処理します。React の <ViewTransition> コンポーネントがタイミングと分類を管理し、CSS 疑似要素が視覚的なアニメーションを制御します。

実装

基本的なルート遷移

import { ViewTransition } from "react";
import { useRouter } from "next/navigation";

function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition>
      {children}
    </ViewTransition>
  );
}

共有要素の遷移

function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={`/products/${product.id}`}>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h3>{product.name}</h3>
    </Link>
  );
}

function ProductDetail({ product }: { product: Product }) {
  return (
    <article>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

方向に応じたナビゲーションアニメーション

import { addTransitionType } from "react";

function handleNavigation(direction: "forward" | "back") {
  addTransitionType(direction);
  router.push(targetUrl);
}

::view-transition-old(root) {
  animation: slide-out 200ms ease-in;
}
::view-transition-new(root) {
  animation: slide-in 200ms ease-out;
}

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

/* Reverse for back navigation */
[data-transition-type="back"]::view-transition-old(root) {
  animation: slide-in 200ms ease-in reverse;
}
[data-transition-type="back"]::view-transition-new(root) {
  animation: slide-out 200ms ease-out reverse;
}

ベストプラクティス

• 一意の view-transition-name 値を割り当ててください。同じ値を重複させると、エラーが表示されずに失敗します
• 反応のよい操作感を保ち、もたつかないように、遷移時間は 300ms 未満にしてください
• アニメーションを無効化または短縮し、prefers-reduced-motion を尊重してください
• addTransitionType を使用して、進む、戻る、横方向のナビゲーションを区別してください
• ネットワークと CPU のスロットリングを有効にして、遷移をテストしてください
• View Transition API に対応していないブラウザー向けに、フォールバック動作を用意してください

プラットフォームの互換性

プラットフォーム	対応状況	備考
Cursor	完全対応	React + Next.js を認識
VS Code	完全対応	CSS 疑似要素に対応
Windsurf	完全対応	フロントエンドフレームワークに対応
Claude Code	完全対応	コード生成
Cline	完全対応	React コンポーネントの生成
aider	部分対応	CSS コンテキストに制限あり

関連スキル

• コンポジションパターン
• React のベストプラクティス
• Web デザインのガイドライン
• エッジレンダリング

キーワード

view-transitions react shared-elements page-transitions animation next-js css-pseudo-elements cross-fade route-animation

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License