PageRevealEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

PageRevealEvent イベントオブジェクトは、pagereveal イベントのハンドラー関数内で利用できます。

文書間の移動中、ナビゲーションによってビュー遷移が起動された場合、移動先の文書から関連するビュー遷移(関連の ViewTransition オブジェクトにアクセスする)を操作することができます。

ビュー遷移以外にも、このイベントは、開始アニメーションの起動やページビューの報告などの場合に役立ちます。これは、文書の <head> 内で requestAnimationFrame() を起動した場合、文書間移動後に最初の Window.requestAnimationFrame() が実行されるのと同じです。例えば、次の reveal() 関数を <head> 内で実行した場合:

function reveal() {
 // 開始アニメーションをここに入れる
}
/* これは、読み込んだ後にレンダリングされる最初のフレームで発行されます。 */
requestAnimationFrame(() => reveal());
/* ページが BFCache から復元された場合に発行されます。 */
window.onpagehide = () => requestAnimationFrame(() => reveal());

コンストラクター

PageRevealEvent() Experimental: 新しい PageRevealEvent オブジェクトのインスタンスを作成します。

インスタンスプロパティ

viewTransition 読取専用 Experimental: 文書間のナビゲーションにおけるアクティブなビュー遷移を表す ViewTransition オブジェクトを保持しています。

例

window.addEventListener("pagereveal", async (e) => {
 // "from" 履歴項目が存在しない場合は戻る
 if (!navigation.activation.from) return;
 // アクティブなビュー遷移が存在する場合のみ実行
 if (e.viewTransition) {
 const fromUrl = new URL(navigation.activation.from.url);
 const currentUrl = new URL(navigation.activation.entry.url);
 // プロフィールページからホームページに移動
 // ~> VT 名を関連するリストアイテムに設定
 if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
 const profile = extractProfileNameFromUrl(fromUrl);
 // view-transition-name の値をアニメーションする要素に設定
 document.querySelector(`#${profile} span`).style.viewTransitionName =
 "name";
 document.querySelector(`#${profile} img`).style.viewTransitionName =
 "avatar";
 // スナップショットが採られた後、名前を除去
 // そうすることで、次のナビゲーションの準備ができる
 await e.viewTransition.ready;
 document.querySelector(`#${profile} span`).style.viewTransitionName =
 "none";
 document.querySelector(`#${profile} img`).style.viewTransitionName =
 "none";
 }
 // Went to profile page
 // ~> Set VT names on the main title and image
 if (isProfilePage(currentUrl)) {
 // view-transition-name の値をアニメーションする要素に設定
 document.querySelector(`#detail main h1`).style.viewTransitionName =
 "name";
 document.querySelector(`#detail main img`).style.viewTransitionName =
 "avatar";
 // スナップショットが採られた後、名前を除去
 // そうすることで、次のナビゲーションの準備ができる
 await e.viewTransition.ready;
 document.querySelector(`#detail main h1`).style.viewTransitionName =
 "none";
 document.querySelector(`#detail main img`).style.viewTransitionName =
 "none";
 }
 }
});

メモ: このコードの採取元のライブデモは、List of Chrome DevRel team members を参照してください。