このページは Cloud Translation API によって翻訳されました。

ビュー遷移の新機能（Google I/O 2024 の更新）

Bramus

Google I/O 2024 で、ビュー移行の次のステップとして、マルチページアプリケーション（MPA）のドキュメント間のビュー移行について発表しました。

さらに、ビュー遷移を全般的により簡単に操作するための改善点をいくつか紹介しました。

view-transition-class を使用して、ビュー遷移擬似要素間でアニメーションスタイルを共有します。
アクティブなタイプによる選択的なビュー遷移。

これらの改善は、シングルページアプリケーション（SPA）における同一ドキュメントビューの遷移と、MPA におけるドキュメント間のビュー遷移の両方に適用されます。

MPA のドキュメント間のビュー遷移

対応ブラウザ

ソース

Chrome 111 では、Chrome チームは単一ページアプリケーション向けの同一ドキュメントビュー移行をリリースしました。この機能は、ウェブ構築コミュニティで好評でした。

多くのデベロッパーがビュー遷移を使って構築したものを見ることができるのは素晴らしいことです。「サムネイルが大きな写真になる」一般的な実装から、今回の Airbnb のような高度にカスタマイズされた没入感のあるエクスペリエンスまで、多岐にわたります。すばらしいですね！

Airbnb で見られるのと同じドキュメントビューの遷移。

ただし、最初の実装では、ビュー遷移を使用するために SPA をビルドする必要がありました。Chrome 126 ではこのことはなくなり、同一オリジンナビゲーションのビュー遷移がデフォルトで有効になりました。同じオリジンの 2 つの異なるドキュメント間にビュー遷移を作成できるようになりました。

ドキュメント間のビュー移行を有効にするには、両端でオプトインする必要があります。これを行うには、@view-transition at ルールを使用して、navigation 記述子を auto に設定します。

@view-transition {
  navigation: auto;
}

ドキュメント間のビュー遷移では、同じドキュメントビュー遷移と同じ構成要素と原則が使用されます。view-transition-name が適用された要素がキャプチャされ、CSS アニメーションを使用してアニメーションをカスタマイズできます。

ドキュメント間のビュー遷移をカスタマイズするには、pageswap イベントと pagereveal イベントを使用します。これにより、ビュー遷移オブジェクトにアクセスできるようになります。

pageswap を使用すると、古いスナップショットを取得する直前に、送信ページに対して土壇場で変更を加えることができます。
pagereveal を使用すると、新しいページを初期化後のレンダリング開始前にカスタマイズできます。

どちらのイベントでも、NavigationActivation オブジェクトにアクセスして、新旧のデスティネーション履歴エントリまたはナビゲーションタイプに基づいて、ドキュメント間のビュー遷移をカスタマイズできます。

さらに、レンダリングブロックを使用してコンテンツが読み込まれるまで待ち、事前レンダリングを利用して、ビュー遷移が実行される前に読み込み時間を改善することもできます。

デモ

こちらの Stack Navigator デモでは、これらすべての機能（およびいくつかの改善点）を組み合わせたものです。

Stack Navigator のデモの録画。ナビゲーションのアクティベーション情報に基づき、pagereveal イベントでカスタマイズされたドキュメント間のビュー遷移を使用します。事前レンダリングも使用されます。

これは、同じオリジンでホストされ、ドキュメント間ナビゲーションを使用する MPA です。pagereveal を使用すると、アニメーションのタイプは、新旧のデスティネーション履歴エントリに基づいて決定されます。

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

ドキュメントを読む

ドキュメント間のビュー遷移を有効にしてカスタマイズする方法については、ドキュメント間のビュー遷移に関するドキュメントをご覧ください。

ビューの切り替えの改善

Chrome では、MPA 向けにドキュメント間のビュー遷移を配布するだけでなく、ビュー遷移の動作全般に関するいくつかの改良も加えられています。

これらの改善は、SPA における同一ドキュメントビューの遷移と、MPA におけるドキュメント間のビュー遷移の両方に適用されます。

アニメーションスタイルを `view-transition-class` と共有する

対応ブラウザ

これまでは、複数のスナップショットを同じようにアニメーション化する場合、一意の view-transition-name を持つ要素ごとに疑似セレクタを繰り返して、各スナップショットを個別にターゲットにする必要がありました。

view-transition-class を使用して、すべてのスナップショットに共有名を追加できるようになりました。一致するすべてのスナップショットをターゲットにするには、この共有名を疑似セレクタで使用します。これにより、1 つから多数の要素に自動的にスケールするセレクタが大幅に簡素化されます。

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

次のカードの例では、view-transition-class を使用して、1 つのセレクタで複数のスナップショットに同じアニメーションタイミングを適用しています。

カードのデモの録画。view-transition-class を使用すると、追加または削除されたカードを除くすべてのカードに同じ animation-timing-function が適用されます。

view-transition-class の詳細については、view-transition-class の専用ドキュメントをご覧ください。

アクティブなタイプによる選択的なビュー遷移

ビュー遷移のもう 1 つの改良点として、ビュー遷移をキャプチャして実行するときのビュー遷移に型を追加したことが挙げられます。これにより、ビュー遷移の宣言で他方を変更することなく、同じページ上のさまざまなビュー遷移を簡単に処理できます。

たとえば、ページ分けシーケンスで次のまたは前のページに移動する場合、そのシーケンスの上位ページと下位ページのどちらに移動するかに応じて、異なるアニメーションを使用できます。

ページネーションのデモの録画タイプによって、使用するアニメーションが決まります。アクティブな遷移タイプにより、スタイルシート内でスタイルが分離されます。

型をアクティブにする前に、DOM にクラスを追加して、CSS 内でそれらのクラスに応答することができます。ただし、移行完了後にクリーンアップする必要もあります。

ビュー遷移タイプを使用すると、同じ結果が得られます。さらに、ビュー遷移が完了すると、これらのタイプが自動的にクリーンアップされるという利点もあります。タイプは、遷移のキャプチャまたは実行時にのみ適用されます。

同じドキュメントビュー遷移の場合は、types を startViewTransition メソッドに渡します。このメソッドはオブジェクトを受け入れるようになりました。update は DOM を更新するコールバック関数で、types は文字列のシーケンスです。

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

ドキュメント間のビュー遷移の場合は、types 記述子を使用して @view-transition at-ルールで型を設定するか、pageswap イベントと pagereveal イベントでオンザフライで設定します。

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

タイプを設定すると、ビュー遷移ルートに適用される :active-view-transition-type() 疑似クラスセレクタと :active-view-transition 疑似クラスセレクタを使用して、CSS 内でこれらのタイプに応答できます。

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

ビュー遷移タイプの詳細については、同一ドキュメントビュー遷移とドキュメント間のビュー遷移に関する専用ドキュメントをご覧ください。

フィードバック

デベロッパーの皆様からのフィードバックをお待ちしております。そのためには、GitHub の CSS ワーキンググループに問題を報告して、提案や質問を含めてください。問題の先頭に [css-view-transitions] を付けます。

バグが発生した場合は、Chromium のバグを報告してください。