NavigateEvent: hasUAVisualTransition property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The hasUAVisualTransition read-only property of the NavigateEvent 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

navigation.addEventListener("navigate", (event) => { // Some navigations, e.g. cross-origin navigations, we // cannot intercept. Let the browser handle those normally. if (!event.canIntercept) { return; } // Don't intercept fragment navigations or downloads. if (event.hashChange || event.downloadRequest !== null) { return; } event.intercept({ handler() { // Fetch the new content const newContent = await fetchNewContent(event.destination.url, { signal: event.signal, }); // 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); }); }, }); });