ViewTransition

Baseline 2025

Newly available

Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ViewTransition はビュー遷移 API のインターフェイスで、アクティブなビュー遷移を表し、遷移が様々な状態（例えば、アニメーションを実行する準備ができている、またはアニメーションが終了した）に達したときに反応する機能、または遷移を完全にスキップする機能を提供します。

このオブジェクト型は、以下の方法で利用することができます。

Document.activeViewTransition プロパティ経由。これにより、後で簡単にアクセスできるように保存しておく必要がなく、どのような状況でもアクティブなビュー遷移に一貫した方法でアクセスできるようになります。
同一文書内 (SPA) の遷移の場合、document.startViewTransition() メソッドによっても返されます。
文書間 (MPA) の遷移の場合、以下のものも利用可能です。
- 遷出元のページ内では、pageswap イベントオブジェクトの PageSwapEvent.viewTransition プロパティ。
- 遷入先のページ内では、pagereveal イベントオブジェクトの PageRevealEvent.viewTransition プロパティ。

startViewTransition() の呼び出し（または MPA遷移におけるページナビゲーション）によってビュー遷移が発生すると、ビュー遷移のプロセスで説明されている一連の段階が続きます。ここでは、それぞれのプロミスがいつ履行されるかについても説明されています。

インスタンスプロパティ

ViewTransition.finished 読取専用: Promise で、遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されます。
ViewTransition.ready 読取専用: Promise で、擬似要素ツリーが作成され、遷移のアニメーションが始まろうとすると履行されます。
ViewTransition.types 読取専用: ViewTransitionTypeSet であり、ビュー遷移に設定された型を参照・変更することができます。
ViewTransition.updateCallbackDone 読取専用: Promise で、 document.startViewTransition() のコールバックが返すプロミスが履行されたときに履行されます。

インスタンスメソッド

skipTransition(): ビュー遷移のアニメーション部分をスキップします。ただし、 DOM を更新する document.startViewTransition() コールバックの実行はスキップしません。

例

次の SPA の例では、 ViewTransition.ready プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュー遷移を発生させ、ウェブアニメーション API によってアニメーションが指定されています。

// 最後のクリックイベントを保存
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // この API に対応していないブラウザーのためのフォールバック
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // クリック位置を取得するか、画面の中央へフォールバックする
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 最も遠いコーナーまでの距離を取得
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // 遷移を作成
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 擬似要素が作成されるのを待つ
  transition.ready.then(() => {
    // ルートの新しいビューをアニメーション
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // アニメーションさせる擬似要素を指定
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュー遷移の遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。

css

::view-transition-image-pair(root) {
  isolation: auto;
}

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