ビュー遷移の新機能（2025 年のアップデート）

Bramus

公開日: 2025 年 10 月 8 日

2023 年に同じドキュメント内のビュー遷移をリリースしてから、多くの変化がありました。

2024 年には、ドキュメント間のビュー遷移をリリースし、view-transition-class やビュー遷移のタイプなどの改良を加えました。また、Safari がビュー遷移のサポートを追加しました。

この記事では、2025 年のビュー遷移の変更点の概要について説明します。

ブラウザとフレームワークのサポートの改善

同一ドキュメント内のビューの切り替えがベースラインで新たに利用可能に

Interop 2025 の重点分野は View Transition API です。具体的には、document.startViewTransition(updateCallback)、view-transition-class を使用した同一ドキュメントのビュー遷移、view-transition-name: match-element を使用した自動命名、:active-view-transition CSS セレクタです。

Firefox は、2025 年 10 月 14 日に安定版となる次期 Firefox 144 リリースにこれらの機能を含める予定です。これにより、これらの機能が Baseline で新たに利用可能になります。

View Transition API のサポートが React コアに組み込まれました

React チームは、今年を通して React のコアにビュー遷移を追加する作業を進めてきました。4 月に react@experimental のサポートを発表し、今週の React Conf で react@canary に移行しました。これは、設計が最終段階に近いことを意味します。

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

詳細については、React の <ViewTransition> ドキュメントをご覧ください。また、このトピックの概要については、Aurora Scharff によるこちらの講演をご覧ください。

最近リリースされた機能

view-transition-name: match-element を使用して要素に自動的に名前を付ける

ビュー遷移の一部としてスナップショットを撮る要素をマークするには、view-transition-name を指定します。これは、2 つの異なる要素間の移行などの機能を有効にするため、ビューの移行に不可欠です。各要素は、トランジションの両側で同じ view-transition-name 値を持ち、ビュー トランジションが処理を行います。

ただし、実際には変化しない多くの要素を遷移させる場合、要素に一意の名前を付けるのは面倒になる可能性があります。リスト内で移動する要素が 100 個ある場合は、100 個の一意の名前を考え出す必要があります。

match-element を使用すると、このような処理は不要になります。これを view-transition-name の値として使用すると、ブラウザは要素の ID に基づいて、一致するすべての要素に対して内部 view-transition-name を生成します。

次のデモでは、このアプローチを使用しています。行内の各カードには、自動的に生成された view-transition-name が割り当てられます。

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

出入りする 1 枚のカードには明示的な名前が付けられます。この名前は、CSS で特定のスナップショットに特定のアニメーションを適用するために使用されます。他のすべてのカードのスナップショットは、関連付けられている view-transition-class を使用してスタイル設定されます。

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

view-transition-class を使用する疑似要素をターゲットとするルールが DevTools に表示されるようになりました

ビューの切り替えをデバッグするには、DevTools の [アニメーション] パネルを使用してすべてのアニメーションを一時停止します。これにより、ビューの切り替えが完了状態に達することを心配することなく、疑似要素を検査する時間を確保できます。アニメーションのタイムラインを手動でスクラブして、切り替えがどのように行われるかを確認することもできます。

以前は、::view-transition-* 疑似要素の 1 つを検査するときに、Chrome DevTools は設定された view-transition-class を使用して疑似要素をターゲットとするルールを公開しませんでした。Chrome 139 でこの機能が追加され、この動作が変更されました。

ネストされたビュー遷移グループは Chrome 140 以降で利用可能

ビュー遷移が実行されると、スナップショットが作成された要素が疑似要素のツリーにレンダリングされます。デフォルトでは、生成されたツリーは「フラット」です。つまり、DOM の元の階層が失われ、キャプチャされたすべてのビュー遷移グループが単一の ::view-transition 疑似要素の下の兄弟になります。

このフラット ツリー アプローチは多くのユースケースで十分ですが、クリッピングや 3D 変換などの視覚効果が使用されると問題が発生します。これらの効果には、ツリーに階層が必要です。

「ネストされたビュー遷移グループ」のおかげで、::view-transition-group 疑似要素を互いにネストできるようになりました。ビュー遷移グループがネストされている場合、遷移中にクリッピングなどの効果を復元できます。

ビュー遷移グループの使用方法

疑似要素がより多くのアニメーション プロパティを継承するようになりました

::view-transition-group(…) 疑似要素に animation-* の一括指定プロパティを設定すると、含まれる ::view-transition-image-pair(…)、::view-transition-old(…)、::view-transition-new(…) もそのプロパティを継承します。これは、::view-transition-new(…) と ::view-transition-old(…) 間のクロスフェードを ::view-transition-group(…) と自動的に同期させるため、便利です。

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

当初、この継承は animation-duration と animation-fill-mode（後に animation-delay も）に限定されていましたが、現在ではより多くのアニメーションのロングハンドを継承するように拡張されています。

ビューの切り替えをサポートするブラウザでは、ユーザー エージェントのスタイルシートに次のものが含まれるようになりました。

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

より多くのプロパティを継承する疑似要素が Chrome 140 でリリースされました。

finished Promise コールバックの実行がフレームを待機しなくなりました

finished プロミスを使用してコールバックを実行する場合、Chrome はフレームが生成されるまで待機してから、そのロジックを実行していました。スクリプトが視覚的に類似した状態を維持しようとしてスタイルを移動すると、アニメーションの最後にちらつきが発生する可能性があります。

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

このタイミングの変更により、ビュー遷移のクリーンアップ ステップがライフサイクルの完了後に非同期で実行されるように移動され、状況が修正されます。これにより、finished の Promise 解決で生成されたビジュアル フレームがビュー遷移構造を維持し、ちらつきが回避されます。

このタイミングの変更は Chrome 140 でリリースされました。

近日提供予定の機能

まだ年内にはいくつかの機能をリリースする予定です。

Chrome 140 でスコープ付きビュー遷移のテストが可能に

スコープ付きビュー遷移は、View Transition API の拡張機能として提案されているもので、任意の HTMLElement で document.startViewTransition() ではなく element.startViewTransition() を呼び出すことで、DOM のサブツリーでビュー遷移を開始できます。

スコープ付きトランジションを使用すると、複数のビュー トランジションを同時に実行できます（トランジション ルートが異なる場合）。ポインタ イベントは、ドキュメント全体ではなく、そのサブツリーでのみ防止されます（再有効化できます）。また、トランジション ルートの外側の要素をスコープ付きビュー トランジションの上に描画することもできます。

次のデモでは、ボタンをクリックしてコンテナ内のドットを移動できます。ドキュメント スコープのビュー遷移または要素スコープのビュー遷移を使用して、動作の違いを確認できます。

この機能は、Chrome 140 以降で chrome://flags の「試験運用版のウェブ プラットフォームの機能」フラグを有効にすることでテストできます。Google では、デベロッパーの皆様からのフィードバックを積極的に求めています。

Chrome 142 で ::view-transition の位置が fixed から absolute に変更されます

::view-transition 疑似要素は現在 position: fixed を使用して配置されています。CSS ワーキング グループの決議に従い、これは position: absolute に変更されます。

この position 値の fixed から absolute への変更（Chrome 142 で導入予定）は、::view-transition 疑似要素の包含ブロックがスナップショット包含ブロックであるため、視覚的には確認できません。getComputedStyle を実行したときに position の値が異なることだけが、観測可能な効果です。

Chrome 142 に document.activeViewTransition が導入されます

ビューの切り替えが開始されると、ViewTransition インスタンスが作成されます。このオブジェクトには、切り替えの進行状況を追跡するための複数の Promise と機能が含まれています。また、切り替えのスキップやタイプの変更などの操作も可能です。

このインスタンスを手動で追跡する必要はなくなり、Chrome がこのオブジェクトを表す document.activeViewTransition プロパティを提供するようになりました。進行中のトランジションがない場合、その値は null になります。

同じドキュメント内のビュー遷移の場合、document.startViewTransition を呼び出すときに値が設定されます。ドキュメント間のビュー遷移の場合、pageswap イベントと pagereveal イベントでその ViewTransition インスタンスにアクセスできます。

document.activeViewTransition のサポートは、Chrome 142 でリリースされる予定です。

ViewTransition.waitUntil を使用して、ビューの切り替えが自動的に終了しないようにする

ビューの切り替えは、すべてのアニメーションが終了すると、自動的に finished 状態になります。この自動終了を防ぐために、まもなく ViewTranistion.waitUntil を使用できるようになります。Promise を渡すと、渡された Promise も解決された場合にのみ、ViewTransition は finished 状態になります。

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

この変更は今年後半に導入される予定で、たとえば fetch を待機したり、スクロール駆動のビュー遷移を簡単に実装したりできるようになります。

次のステップ

ご覧のとおり、2023 年にビュー遷移を最初にリリースして以来、私たちは立ち止まることなく開発を続けてきました。今後、スコープ付きビュー遷移をリリースする予定です。いつものように、フィードバックをお待ちしています。

ビューの切り替えについてご不明な点がある場合は、ソーシャル メディアでお問い合わせください。ビュー遷移の機能リクエストは、CSS WG に提出できます。バグが発生した場合は、Chromium バグを報告してください。