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
viewTransition
Schreibgeschü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 |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
PageRevealEvent | ||||||||||||
PageRevealEvent() constructor | ||||||||||||
viewTransition |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.