PageRevealEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das PageRevealEvent-Ereignisobjekt ist in Handler-Funktionen für das pagereveal-Ereignis verfügbar.
Während einer Navigation zwischen Dokumenten erlaubt es Ihnen, eine zugehörige View-Transition zu manipulieren (und bietet Zugriff auf das relevante ViewTransition-Objekt) aus dem Dokument, zu dem navigiert wird, wenn eine View-Transition durch die Navigation ausgelöst wurde.
Außerhalb von View-Transitions ist dieses Ereignis auch für Fälle nützlich, wie das Auslösen einer Startanimation oder das Berichten eines Seitenaufrufs. Es entspricht dem ersten Window.requestAnimationFrame()-Lauf nach einer Navigation zwischen Dokumenten, wenn Sie requestAnimationFrame() im <head> des Dokuments auslösen würden. Zum Beispiel, wenn Sie die folgende reveal()-Funktion im <head> ausführen:
function reveal() { // Include startup animation here } /* This will fire in the first rendered frame after loading */ requestAnimationFrame(() => reveal()); /* This will fire if the page is restored from BFCache */ window.onpagehide = () => requestAnimationFrame(() => reveal()); Konstruktor
PageRevealEvent()-
Erstellt eine neue Instanz des
PageRevealEvent-Objekts.
Instanzeigenschaften
viewTransitionSchreibgeschützt-
Beinhaltet ein
ViewTransition-Objekt, das die aktive View-Transition für die Navigation zwischen Dokumenten darstellt.
Beispiele
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: Sehen Sie die Liste der Chrome DevRel Teammitglieder für die Live-Demo, aus der dieser Code stammt.
Spezifikationen
| Specification |
|---|
| HTML # the-pagerevealevent-interface |