PageSwapEvent

Das PageSwapEvent-Ereignisobjekt steht innerhalb von Handlerfunktionen für das pageswap Ereignis zur Verfügung.

Das pageswap-Ereignis wird ausgelöst, wenn Sie über Dokumente navigieren, wenn das vorherige Dokument kurz vor dem Entladen steht. Bei einer Navigation über Dokumente hinweg ermöglicht Ihnen das PageSwapEvent-Ereignisobjekt, den zugehörigen View-Übergang zu manipulieren (wobei Zugriff auf das relevante ViewTransition-Objekt gewährt wird) von dem Dokument, von dem aus navigiert wird, wenn ein View-Übergang durch die Navigation ausgelöst wurde. Es bietet auch Zugriff auf Informationen über den Navigationstyp sowie aktuelle und Ziel-Dokumente.

Konstruktor

PageSwapEvent()

Erstellt eine neue Instanz des PageSwapEvent-Objekts.

Instanz-Eigenschaften

activation Schreibgeschützt

Enthält ein NavigationActivation-Objekt mit dem Navigationstyp sowie den aktuellen und Ziel-Dokument-Verlaufseinträgen für eine gleichherkunftsbezogene Navigation. Wenn die Navigation eine plattformübergreifende URL irgendwo in der Umleitkette hat, wird null zurückgegeben.

viewTransition Schreibgeschützt

Enthält ein ViewTransition-Objekt, das den aktiven View-Übergang für die Navigation über Dokumente hinweg darstellt.

Beispiele

js
window.addEventListener("pageswap", async (e) => {
  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const currentUrl = e.activation.from?.url
      ? new URL(e.activation.from.url)
      : null;
    const targetUrl = new URL(e.activation.entry.url);

    // Going from profile page to homepage
    // ~> The big img and title are the ones!
    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }

    // Going to profile page
    // ~> The clicked items are the ones!
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }
  }
});

Hinweis: Sehen Sie sich die Liste der Teammitglieder von Chrome DevRel für die Live-Demo an, aus der dieser Code stammt.

Spezifikationen

Specification
HTML Standard
# the-pageswapevent-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch