ContextQMD
Back to Content

PopStateEvent: hasUAVisualTransition property

files/en-us/web/api/popstateevent/hasuavisualtransition/index.md

latest1.6 KB
Original Source

{{APIRef("History API")}}

The hasUAVisualTransition read-only property of the {{domxref("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

{{Specifications}}

Browser compatibility

{{Compat}}

See also