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 を参照してください。