Window: pagereveal-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das pagereveal-Ereignis wird ausgelöst, wenn ein Dokument erstmals gerendert wird, sei es beim Laden eines neuen Dokuments aus dem Netzwerk oder beim Aktivieren eines Dokuments (entweder aus dem Back/Forward-Cache (bfcache) oder prerender).

Dies ist nützlich im Fall von Cross-Dokument (MPA) Ansichtsübergängen, um eine aktive Übergangssituation von der eingehenden Seite einer Navigation zu manipulieren. Zum Beispiel könnte man den Übergang überspringen oder die eingehende Übergangsanimation über JavaScript anpassen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

Ereignistyp

Ein PageRevealEvent. Erbt von Event.

Event PageRevealEvent

Ereigniseigenschaften

PageRevealEvent.viewTransition Schreibgeschützt

Gibt das ViewTransition-Objekt zurück, das den eingehenden Cross-Dokument-Ansichtsübergang darstellt, falls ein solcher aktiv ist, wenn das Ereignis ausgelöst wird. Wenn dies nicht der Fall ist, wird null zurückgegeben.

Beispiele

js
window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      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)) {
      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

Hinweis: Siehe Liste der Chrome DevRel-Teammitglieder für die Live-Demo, aus der dieser Code stammt.

Spezifikationen

Specification
HTML Standard
# event-pagereveal

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch