PageSwapEvent

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

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

pageswap イベントは、前の文書がアンロードされようとしているときに、文書間を移動するときに発行されます。文書間の移動中に、PageSwapEvent イベントオブジェクトを使用すると、移動元の文書から関連するビュー遷移（関連する ViewTransition オブジェクトにアクセス）を操作することができます。また、ナビゲーションの種類や現在の文書と出力先文書に関する情報にもアクセスできます。

コンストラクター

PageSwapEvent()

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

インスタンスプロパティ

activation 読取専用

NavigationActivation オブジェクトを保持しており、これは、同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目が含まれています。ナビゲーションのリダイレクトチェーンのどこかにオリジンをまたぐ URL がある場合は、null が返されます。

viewTransition 読取専用

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

例

js
window.addEventListener("pageswap", async (e) => {
  // アクティブなビュー遷移が存在する場合のみ実行
  if (e.viewTransition) {
    const currentUrl = e.activation.from?.url
      ? new URL(e.activation.from.url)
      : null;
    const targetUrl = new URL(e.activation.entry.url);

    // プロフィールページからホームページへ移動
    // ~> それぞれの大きな画像とタイトル
    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
      // view-transition-name の値をアニメーションする要素に設定
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // スナップショットが採られた後、view-transition-names を除去
      // BFCacheにページの状態が保持されたことによる名前の競合を回避
      await e.viewTransition.finished;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }

    // プロフィールページへ移動
    // ~> クリックしたアイテム
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // view-transition-name の値をアニメーションする要素に設定
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // スナップショットが採られた後、view-transition-names を除去
      // BFCacheにページの状態が保持されたことによる名前の競合を回避
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }
  }
});

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

仕様書

Specification
HTML Standard
# the-pageswapevent-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報