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> 内で実行した場合:

js
function reveal() {
  // 開始アニメーションをここに入れる
}
/* これは、読み込んだ後にレンダリングされる最初のフレームで発行されます。 */
requestAnimationFrame(() => reveal());

/* ページが BFCache から復元された場合に発行されます。 */
window.onpagehide = () => requestAnimationFrame(() => reveal());

コンストラクター

PageRevealEvent() Experimental

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

インスタンスプロパティ

viewTransition 読取専用 Experimental

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

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

仕様書

Specification
HTML
# the-pagerevealevent-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PageRevealEvent
PageRevealEvent() constructor
viewTransition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報