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