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

Bramus

公開日: 2024 年 5 月 16 日

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

さらに、ビューの切り替えを全般的に簡単に操作できるようにする改善点もいくつかご紹介しました。

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

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

MPA のクロスドキュメント ビュー遷移

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

ビュー遷移を使ってさまざまなものが作成されているのを見るのは素晴らしいことです。「サムネイルを拡大して大きな写真にする」という一般的な実装から、Airbnb のような高度にカスタマイズされた没入型のエクスペリエンスまで、さまざまな実装があります。お見事です！

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

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

@view-transition {
  navigation: auto;
}

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

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

• pageswap を使用すると、古いスナップショットが作成される直前に、送信ページに最後の変更を加えることができます。
• pagereveal を使用すると、新しいページが初期化された後、レンダリングが開始される前にカスタマイズできます。

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

さらに、レンダリング ブロックでコンテンツの読み込みを待機したり、プリレンダリングに依存したりすることで、ビューの切り替えが実行される前の読み込み時間を短縮できます。

デモ

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

これは、同じオリジンでホストされているクロスドキュメント ナビゲーションを含む 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;
  }
});

ドキュメントを読む

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

移行の改善点を確認する

MPA のクロスドキュメント ビュー遷移のリリースに加えて、Chrome にはビュー遷移全般の操作に関するいくつかの改善も含まれています。

これらの改善は、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 の詳細については、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 @rule でタイプを設定するか、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 Working Group に問題を報告し、提案や質問をお送りください。事象の先頭に [css-view-transitions] を付けます。

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