ビュー遷移の新機能（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 Newly で利用可能になります。

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

React チームは、この 1 年間、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;
}

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

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

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

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

ビューの切り替えが実行されると、スナップショットが作成された要素が疑似要素のツリーにレンダリングされます。デフォルトでは、生成されるツリーは「フラット」です。つまり、DOM の元の階層が失われ、キャプチャされたすべてのビュー トランジション グループは 1 つの ::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 で element.startViewTransition()（document.startViewTransition() ではなく）を呼び出すことで、DOM のサブツリーでビュー遷移を開始できます。

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

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

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

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

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

Chrome 142 で導入される position の値の fixed から absolute への変更は、::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 年にビューの切り替えを最初にリリースして以来、Google は立ち止まることなく開発を続けてきました。今後、スコープ付きビューの切り替えをリリースする予定です。いつものように、フィードバックをお待ちしています。

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