NavigateEvent: hasUAVisualTransition-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die hasUAVisualTransition-Eigenschaft (nur lesbar) des NavigateEvent Interfaces gibt true zurück, wenn der User-Agent vor dem Auslösen dieses Ereignisses eine visuelle Transition für diese Navigation durchgeführt hat, andernfalls false.
User-Agents können eine eingebaute visuelle Transition bei der Ausführung von Seitennavigationen bereitstellen. Wenn der Seitenautor ebenfalls eine visuelle Transition hinzufügt, können der User-Agent und die Autor-Transitionen in Konflikt geraten und einen Besucher verwirren. Die Eigenschaft lässt Sie erkennen, ob eine UA-Transition bereitgestellt wurde, sodass Sie Autor-Transitionen für eine bessere Benutzererfahrung überspringen können.
Wert
Ein boolescher Wert.
Beispiele
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); }); }, }); }); Spezifikationen
| Specification |
|---|
| HTML # dom-navigateevent-hasuavisualtransition |
Browser-Kompatibilität
Loading…