PageRevealEvent
Das PageRevealEvent
-Ereignisobjekt steht in Handler-Funktionen für das pagereveal
Ereignis zur Verfügung.
Während einer Navigation über Dokumente hinweg ermöglicht es Ihnen, eine verwandte View-Transition zu manipulieren (und Zugriff auf das relevante ViewTransition
Objekt zu erhalten) aus dem Dokument, zu dem navigiert wird, wenn die Navigation eine View-Transition ausgelöst hat.
Außerhalb von View-Transitions ist dieses Ereignis auch nützlich für Fälle wie das Auslösen einer Startanimation oder das Melden eines Seitenaufrufs. Es entspricht dem ersten Lauf von Window.requestAnimationFrame()
nach einer Navigation über Dokumente hinweg, wenn Sie requestAnimationFrame()
im <head>
des Dokuments auslösen würden. Wenn Sie zum Beispiel die folgende reveal()
-Funktion im <head>
ausführen würden:
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 eines
PageRevealEvent
-Objekts.
Instanz-Eigenschaften
viewTransition
Nur lesbar-
Enthält ein
ViewTransition
Objekt, das die aktive View-Transition für die Navigation über Dokumente hinweg 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: Siehe Liste der Chrome DevRel-Teammitglieder für die Live-Demo, aus der dieser Code stammt.
Spezifikationen
Specification |
---|
HTML Standard # the-pagerevealevent-interface |
Browser-Kompatibilität
BCD tables only load in the browser