PopStateEvent: hasUAVisualTransition property
The hasUAVisualTransition
read-only property of the PopStateEvent
interface returns true
if the user agent performed a visual transition for this navigation before dispatching this event, or false
otherwise.
User agents may provide a built-in visual transition when executing site navigations. If the site author also adds a visual transition, user agent and author transitions may conflict and confuse a visitor. The property lets you detect whether a UA transition was provided so that you can skip author transitions for a better user experience.
Value
A boolean value.
Examples
js
window.addEventListener("popstate", async (event) => {
// Fetch the new content
const newContent = await fetchNewContent(location.href);
// The UA does not support View Transitions, or the UA
// already provided a Visual Transition by itself (e.g. swipe back).
// In either case, update the DOM directly
if (!document.startViewTransition || event.hasUAVisualTransition) {
doSinglePageAppNav(newContent);
return;
}
// Update the content using a View Transition
document.startViewTransition(() => {
doSinglePageAppNav(newContent);
});
});
Specifications
Specification |
---|
HTML # dom-popstateevent-hasuavisualtransition |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hasUAVisualTransition |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.