Google I/O 2024 で、ビュー移行の次のステップとして、マルチページ アプリケーション(MPA)のドキュメント間のビュー移行について発表しました。
さらに、ビュー遷移を全般的により簡単に操作するための改善点をいくつか紹介しました。
view-transition-class
を使用して、ビュー遷移擬似要素間でアニメーション スタイルを共有します。- アクティブなタイプによる選択的なビュー遷移。
これらの改善は、シングルページ アプリケーション(SPA)における同一ドキュメント ビューの遷移と、MPA におけるドキュメント間のビュー遷移の両方に適用されます。
MPA のドキュメント間のビュー遷移
Chrome 111 では、Chrome チームは単一ページ アプリケーション向けの同一ドキュメント ビュー移行をリリースしました。この機能は、ウェブ構築コミュニティで好評でした。
多くのデベロッパーがビュー遷移を使って構築したものを見ることができるのは素晴らしいことです。「サムネイルが大きな写真になる」一般的な実装から、今回の 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 デモでは、これらすべての機能(およびいくつかの改善点)を組み合わせたものです。
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
と共有する
対応ブラウザ
- 125
- 125
- x
- x
これまでは、複数のスナップショットを同じようにアニメーション化する場合、一意の 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 のバグを報告してください。