ビュー遷移の新機能（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 at-rule を使用し、navigation 記述子を auto に設定します。

@view-transition {
  navigation: auto;
}

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

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

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

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

さらに、レンダリング ブロックを使用してコンテンツの読み込みを待機し、プリレンダリングを利用することで、ビュー遷移の実行前に読み込み時間を短縮できます。

デモ

この スタック ナビゲータのデモでは、これらの機能がすべて（改善も含めて）統合されています。

これは、ドキュメント間ナビゲーションを備えた 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 の詳細については、view-transition-class に関する専用ドキュメントをご覧ください。

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

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

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

アクティブ タイプが登場する前は、DOM にクラスを追加し、CSS でそれらのクラスに応答していました。ただし、移行が完了した後にクリーンアップも行う必要があります。

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

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

const direction = determineBackwardsOrForwards();

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

ドキュメント間のビュー遷移の場合は、types 記述子を使用して @view-transition アットルールでタイプを設定するか、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 バグを報告してください。