Window: pagereveal イベント

addEventListener("pagereveal", (event) => {});
onpagereveal = (event) => {};

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";
    }
    // プロフィールページに移動
    // ~> VT 名をメインタイトルと画像に設定
    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";
    }
  }
});