PageSwapEvent
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The PageSwapEvent
event object is made available inside handler functions for the pageswap
event.
The pageswap
event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the PageSwapEvent
event object allows you to manipulate the related view transition (providing access to the relevant ViewTransition
object) from the document being navigated from, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.
Constructor
PageSwapEvent()
Experimental-
Creates a new
PageSwapEvent
object instance.
Instance properties
activation
Read only Experimental-
Contains a
NavigationActivation
object containing the navigation type and current and destination document history entries for a same-origin navigation. If the navigation has a cross-origin URL anywhere in the redirect chain, it returnsnull
. viewTransition
Read only Experimental-
Contains a
ViewTransition
object representing the active view transition for the cross-document navigation.
Examples
window.addEventListener("pageswap", async (e) => {
// Only run this if an active view transition exists
if (e.viewTransition) {
const currentUrl = e.activation.from?.url
? new URL(e.activation.from.url)
: null;
const targetUrl = new URL(e.activation.entry.url);
// Going from profile page to homepage
// ~> The big img and title are the ones!
if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
// 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 view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#detail main h1`).style.viewTransitionName =
"none";
document.querySelector(`#detail main img`).style.viewTransitionName =
"none";
}
// Going to profile page
// ~> The clicked items are the ones!
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// 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 view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#${profile} span`).style.viewTransitionName =
"none";
document.querySelector(`#${profile} 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-pageswapevent-interface |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.