Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
PageRevealEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
DasPageRevealEvent-Ereignisobjekt ist in Handler-Funktionen für daspagereveal-Ereignis verfügbar.
Während einer Navigation zwischen Dokumenten erlaubt es Ihnen, eine zugehörigeView-Transition zu manipulieren (und bietet Zugriff auf das relevanteViewTransition-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 erstenWindow.requestAnimationFrame()-Lauf nach einer Navigation zwischen Dokumenten, wenn SierequestAnimationFrame() im<head> des Dokuments auslösen würden. Zum Beispiel, wenn Sie die folgendereveal()-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ütztBeinhaltet 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 dieListe der Chrome DevRel Teammitglieder für die Live-Demo, aus der dieser Code stammt.
Spezifikationen
| Specification |
|---|
| HTML # the-pagerevealevent-interface |