2 つの異なるドキュメント間でビュー遷移が発生することを、ドキュメント間のビュー遷移といいます。これは通常、マルチページ アプリケーション(MPA)に該当します。Chrome 126 以降の Chrome では、ドキュメント間のビュー遷移がサポートされています。
ドキュメント間のビュー遷移は、同一ドキュメント ビュー遷移と同じ構成要素と原則に基づいており、これは非常に意図的なものです。
- ブラウザは、元のページと新しいページの両方で一意の
view-transition-name
を持つ要素のスナップショットを取得します。 - レンダリングが抑制されている間に DOM が更新される。
- 最後に、遷移は CSS アニメーションを利用しています。
同一ドキュメント ビューの遷移と比較した場合、ドキュメント間のビュー遷移では、ビュー遷移を開始するために document.startViewTransition
を呼び出す必要がない点が異なります。代わりに、ドキュメント間のビュー遷移のトリガーは、あるページから別のページへの同一オリジン ナビゲーションです。このアクションは通常、ウェブサイトのユーザーがリンクをクリックすることで実行されます。
つまり、2 つのドキュメント間のビュー遷移を開始するために呼び出す API はありません。ただし、次の 2 つの条件を満たす必要があります。
- 両方のドキュメントが同じオリジンに存在する必要があります。
- ビューの移行を許可するには、両方のページでオプトインする必要があります。
これらの条件については、このドキュメントの後半で説明します。
ドキュメント間のビュー遷移が同一オリジン ナビゲーションに限定される
ドキュメント間のビュー遷移は、同一オリジン ナビゲーションのみに制限されます。参加している両方のページのオリジンが同じ場合、ナビゲーションは同一オリジンと見なされます。
ページのオリジンは、使用されているスキーム、ホスト名、ポートの組み合わせです。詳しくは、web.dev をご覧ください。
たとえば、developer.chrome.com
から developer.chrome.com/blog
に移動する場合は、同じオリジンであるため、ドキュメント間のビュー遷移を設定できます。developer.chrome.com
から www.chrome.com
に移動する場合、その遷移はクロスオリジンであり、同一サイトであるため、使用できません。
ドキュメント間のビュー移行はオプトイン方式
2 つのドキュメント間でドキュメント間のビュー移行を行うには、参加している両方のページで許可を有効にする必要があります。これは CSS の @view-transition
アットルールで行います。
@view-transition
at-rule で navigation
記述子を auto
に設定して、ドキュメント間の同一オリジン ナビゲーションのビュー遷移を有効にします。
@view-transition {
navigation: auto;
}
navigation
記述子を auto
に設定すると、次の NavigationType でビュー遷移が発生するようになります。
traverse
push
またはreplace
(有効化がユーザーによってブラウザの UI メカニズムから開始された場合)。
auto
から除外される操作には、たとえば、URL アドレスバーを使用した移動やブックマークのクリック、ユーザーまたはスクリプトによる再読み込みなどが挙げられます。
ナビゲーションに時間がかかりすぎる場合(Chrome の場合は 4 秒を超える)、ビュー遷移は TimeoutError
DOMException
でスキップされます。
ドキュメント間のビュー遷移のデモ
ビュー遷移を使用して Stack Navigator のデモを作成する次のデモをご覧ください。ここには document.startViewTransition()
の呼び出しがなく、ビュー遷移はページ間の移動によってトリガーされます。
ドキュメント間のビュー遷移をカスタマイズする
ドキュメント間のビュー遷移をカスタマイズする場合、使用できるウェブ プラットフォーム機能がいくつかあります。
これらの機能は View Transition API の仕様そのものではなく、一緒に使用するように設計されています。
pageswap
イベントと pagereveal
イベント
ドキュメント間のビュー遷移をカスタマイズできるように、HTML 仕様には pageswap
と pagereveal
という 2 つの新しいイベントが含まれています。
この 2 つのイベントは、ビュー遷移が発生するかどうかにかかわらず、同一オリジンのドキュメント間ナビゲーションごとに発生します。2 つのページ間でビュー遷移が発生する場合は、これらのイベントの viewTransition
プロパティを使用して ViewTransition
オブジェクトにアクセスできます。
pageswap
イベントは、ページの最後のフレームがレンダリングされる前に呼び出されます。これを使用して、古いスナップショットを取得する直前に、送信ページで土壇場で変更を加えることができます。pagereveal
イベントは、ページが初期化または再有効化された後、最初のレンダリングが行われる前に発生します。これを使用すると、新しいスナップショットが取得される前に新しいページをカスタマイズできます。
たとえば、これらのイベントを使用して一部の view-transition-name
値をすばやく設定または変更したり、sessionStorage
のデータを読み書きしてドキュメント間でデータを渡したりして、実際に実行する前にビュー遷移をカスタマイズできます。
let lastClickX, lastClickY;
document.addEventListener('click', (event) => {
if (event.target.tagName.toLowerCase() === 'a') return;
lastClickX = event.clientX;
lastClickY = event.clientY;
});
// Write position to storage on old page
window.addEventListener('pageswap', (event) => {
if (event.viewTransition && lastClick) {
sessionStorage.setItem('lastClickX', lastClickX);
sessionStorage.setItem('lastClickY', lastClickY);
}
});
// Read position from storage on new page
window.addEventListener('pagereveal', (event) => {
if (event.viewTransition) {
lastClickX = sessionStorage.getItem('lastClickX');
lastClickY = sessionStorage.getItem('lastClickY');
}
});
必要に応じて、両方のイベントで遷移をスキップすることもできます。
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
if (goodReasonToSkipTheViewTransition()) {
e.viewTransition.skipTransition();
}
}
}
pageswap
と pagereveal
の ViewTransition
オブジェクトは、2 つの異なるオブジェクトです。また、さまざまな Promise の処理方法も異なります。
pageswap
: ドキュメントが非表示になると、古いViewTransition
オブジェクトはスキップされます。その場合、viewTransition.ready
は拒否し、viewTransition.finished
は解決します。pagereveal
: この時点でupdateCallBack
Promise は解決済みです。viewTransition.ready
とviewTransition.finished
の Promise を使用できます。
ナビの有効化情報
pageswap
イベントと pagereveal
イベントのどちらでも、元のページと新しいページの URL に基づいてアクションを実行できます。
たとえば、MPA Stack Navigator では、使用するアニメーションの種類はナビゲーション パスによって異なります。
- 概要ページから詳細ページに移動するときは、新しいコンテンツを右から左にスライドインする必要があります。
- 詳細ページから概要ページに移動する際、古いコンテンツを左から右にスライドアウトする必要があります。
そのためには、pageswap
の場合はこれから発生するナビゲーションに関する情報、pagereveal
の場合は直前に発生したナビゲーションに関する情報が必要です。
そのため、ブラウザで同一オリジン ナビゲーションに関する情報を保持する NavigationActivation
オブジェクトを公開できるようになりました。このオブジェクトは、Navigation API の navigation.entries()
で見つかったナビゲーション タイプ、現在および最終的なデスティネーション履歴エントリを公開します。
有効にしたページでは、navigation.activation
を使用してこのオブジェクトにアクセスできます。pageswap
イベントでは、e.activation
を通じてこれにアクセスできます。
こちらのプロファイルのデモをご覧ください。こちらでは、pageswap
イベントと pagereveal
イベントの NavigationActivation
情報を使用して、ビュー遷移に参加する必要がある要素に view-transition-name
値を設定しています。
これにより、リスト内のすべてのアイテムを事前に view-transition-name
で装飾する必要がなくなります。この処理は JavaScript を使用してジャストインタイムで行われ、必要な要素でのみ行われます。
コードは次のとおりです。
// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
if (e.viewTransition) {
const targetUrl = new URL(e.activation.entry.url);
// Navigating to a profile page
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// Set view-transition-name values on the clicked row
document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';
// Remove view-transition-names after snapshots have been taken
// (this to deal with BFCache)
await e.viewTransition.finished;
document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
}
}
});
// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
if (e.viewTransition) {
const fromURL = new URL(navigation.activation.from.url);
const currentURL = new URL(navigation.activation.entry.url);
// Navigating from a profile page back to the homepage
if (isProfilePage(fromURL) && isHomePage(currentURL)) {
const profile = extractProfileNameFromUrl(currentURL);
// Set view-transition-name values on the elements in the list
document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';
// Remove names after snapshots have been taken
// so that we're ready for the next navigation
await e.viewTransition.ready;
document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
}
}
});
また、このコードはビュー遷移の実行後に view-transition-name
値を削除することで、自身をクリーンアップします。これにより、ページで連続的なナビゲーションの準備が整い、履歴の移動も処理できるようになります。
そのためには、view-transition-name
を一時的に設定するこのユーティリティ関数を使用します。
const setTemporaryViewTransitionNames = async (entries, vtPromise) => {
for (const [$el, name] of entries) {
$el.style.viewTransitionName = name;
}
await vtPromise;
for (const [$el, name] of entries) {
$el.style.viewTransitionName = '';
}
}
上のコードは、次のように簡略化できます。
// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
if (e.viewTransition) {
const targetUrl = new URL(e.activation.entry.url);
// Navigating to a profile page
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// Set view-transition-name values on the clicked row
// Clean up after the page got replaced
setTemporaryViewTransitionNames([
[document.querySelector(`#${profile} span`), 'name'],
[document.querySelector(`#${profile} img`), 'avatar'],
], e.viewTransition.finished);
}
}
});
// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
if (e.viewTransition) {
const fromURL = new URL(navigation.activation.from.url);
const currentURL = new URL(navigation.activation.entry.url);
// Navigating from a profile page back to the homepage
if (isProfilePage(fromURL) && isHomePage(currentURL)) {
const profile = extractProfileNameFromUrl(currentURL);
// Set view-transition-name values on the elements in the list
// Clean up after the snapshots have been taken
setTemporaryViewTransitionNames([
[document.querySelector(`#${profile} span`), 'name'],
[document.querySelector(`#${profile} img`), 'avatar'],
], e.viewTransition.ready);
}
}
});
レンダリング ブロックを使用してコンテンツが読み込まれるのを待つ
ある要素が新しい DOM に存在するまで、ページの最初のレンダリングを保留したい場合があります。これによりフラッシュを回避し、アニメーション化先の状態が安定します。
<head>
で、次のメタタグを使用して、ページが最初にレンダリングされる前に存在する必要がある要素 ID を 1 つ以上定義します。
<link rel="expect" blocking="render" href="#section1">
このメタタグは、その要素が DOM 内に存在するべきで、コンテンツを読み込むべきではないという意味です。たとえば画像の場合、指定された id
を持つ <img>
タグが DOM ツリーに存在するだけで、条件が true と評価されます。画像自体がまだ読み込み中である可能性があります。
レンダリングのブロックに取り組む前に、増分レンダリングがウェブの基本要素であることに留意してください。レンダリングのブロックを選択する場合は注意してください。レンダリングのブロックによる影響はケースバイケースで評価する必要があります。デフォルトでは、blocking=render
は、Core Web Vitals への影響を測定してユーザーに与える影響を積極的に測定、測定できる場合を除き、使用しないでください。
ドキュメント間のビュー遷移で遷移タイプを表示する
ドキュメント間のビュー遷移は、ビュー遷移タイプもサポートしており、アニメーションとキャプチャする要素をカスタマイズできます。
たとえば、ページネーションの次のページに移動または前のページに移動するときに、シーケンスの上位のページと低いページのどちらに移動するかに応じて、異なるアニメーションを使用できます。
これらのタイプを事前に設定するには、@view-transition
at ルールにタイプを追加します。
@view-transition {
navigation: auto;
types: slide, forwards;
}
その場で型を設定するには、pageswap
イベントと pagereveal
イベントを使用して e.viewTransition.types
の値を操作します。
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
const transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry);
e.viewTransition.types.add(transitionType);
}
});
これらのタイプは、古いページの ViewTransition
オブジェクトから新しいページの ViewTransition
オブジェクトには自動的に引き継がれません。アニメーションを想定どおりに動作させるには、少なくとも新しいページで使用するタイプを決定する必要があります。
これらのタイプに応答するには、同じドキュメント ビュー遷移と同じ方法で :active-view-transition-type()
疑似クラス セレクタを使用します。
/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
:root {
view-transition-name: none;
}
article {
view-transition-name: content;
}
.pagination {
view-transition-name: pagination;
}
}
/* 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;
}
}
/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-right;
}
&::view-transition-new(content) {
animation-name: slide-in-from-left;
}
}
/* Animation styles for reload type only */
html:active-view-transition-type(reload) {
&::view-transition-old(root) {
animation-name: fade-out, scale-down;
}
&::view-transition-new(root) {
animation-delay: 0.25s;
animation-name: fade-in, scale-up;
}
}
型はアクティブ ビュー遷移にのみ適用されるため、ビュー遷移が終了すると型は自動的にクリーンアップされます。そのため、型は BFCache などの機能とうまく連携しています。
デモ
次のページ設定のデモでは、移動先のページ番号に応じて、ページ コンテンツが前後にスライドします。
使用する遷移タイプは、pagereveal
イベントと pageswap
イベントで開始 URL と発信元 URL を確認することで決定されます。
const determineTransitionType = (fromNavigationEntry, toNavigationEntry) => {
const currentURL = new URL(fromNavigationEntry.url);
const destinationURL = new URL(toNavigationEntry.url);
const currentPathname = currentURL.pathname;
const destinationPathname = destinationURL.pathname;
if (currentPathname === destinationPathname) {
return "reload";
} else {
const currentPageIndex = extractPageIndexFromPath(currentPathname);
const destinationPageIndex = extractPageIndexFromPath(destinationPathname);
if (currentPageIndex > destinationPageIndex) {
return 'backwards';
}
if (currentPageIndex < destinationPageIndex) {
return 'forwards';
}
return 'unknown';
}
};
フィードバック
デベロッパーの皆様からのフィードバックをお待ちしております。共有するには、GitHub の CSS ワーキング グループに問題を報告して、提案や質問を含めてください。問題の先頭に [css-view-transitions]
を付けます。バグが発生した場合は、Chromium のバグを報告してください。