ビュー遷移の新機能（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 オブジェクトにアクセスして、古いリンク先履歴エントリと新しいリンク先履歴エントリ、またはナビゲーション タイプに基づいて、ドキュメント間のビュー遷移をカスタマイズできます。

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

デモ

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

これは、同じオリジンでホストされている、クロスドキュメント ナビゲーションを備えた 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 に関する専用ドキュメントをご覧ください。

アクティブなタイプを使用した選択的なビュー遷移

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

たとえば、ページネーション シーケンスで次のページまたは前のページに移動する場合は、シーケンス内の上位のページに移動するか下位のページに移動するかに応じて、異なるアニメーションを使用することをおすすめします。

アクティブ タイプが登場する前は、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 バグを報告してください。