PageRevealEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The PageRevealEvent
event object is made available inside handler functions for the pagereveal
event.
During a cross-document navigation, it allows you to manipulate a related view transition (providing access to the relevant ViewTransition
object) from the document being navigated to, if a view transition was triggered by the navigation.
Outside view transitions, this event is also useful for cases such as triggering a startup animation, or reporting a page view. It's equivalent to the first Window.requestAnimationFrame()
run after a cross-document navigation, if you were to trigger requestAnimationFrame()
in the <head>
of the document. For example, if you ran the following reveal()
function in the <head>
:
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());
Constructor
PageRevealEvent()
-
Creates a new
PageRevealEvent
object instance.
Instance properties
viewTransition
Read only-
Contains a
ViewTransition
object representing the active view transition for the cross-document navigation.
Examples
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";
}
}
});
Note: See List of Chrome DevRel team members for the live demo this code is taken from.
Specifications
Specification |
---|
HTML Standard # the-pagerevealevent-interface |
Browser compatibility
BCD tables only load in the browser