Signatur
Beschreibung
Die Eigenschaft hasUAVisualTransition gehört zum NavigateEvent der Navigation API. Sie ist true, wenn der Browser für die aktuelle Navigation schon eine eigene Animation gezeigt hat. Ein typischer Fall ist die Wisch-Geste zum Zurück- oder Vorblättern auf Mobilgeräten oder Touchpads, bei der der Browser den vorherigen Seitenzustand als Vorschau einblendet. Hat der Browser keine solche Transition abgespielt, ist der Wert false.
Wichtig ist das vor allem für Single-Page-Anwendungen, die Navigationen mit event.intercept() abfangen und eigene Übergänge anzeigen, zum Beispiel mit document.startViewTransition() (View Transitions API). Laufen beide Animationen nacheinander ab, sieht der Übergang doppelt aus und wirkt ruckelig: Die Wisch-Animation des Browsers endet, dann startet die Seiten-Animation vom alten Zustand aus noch einmal. Mit hasUAVisualTransition lässt sich die eigene Animation in diesem Fall weglassen und der neue Zustand sofort anzeigen.
Die Eigenschaft ist nur lesbar und steht im navigate-Handler von window.navigation sofort zur Verfügung. Normalerweise fragt man sie direkt vor dem Start einer View Transition ab.
Rückgabewert
true, wenn der Browser vor dem Auslösen des Ereignisses bereits eine visuelle Transition für diese Navigation gezeigt hat, sonst false.Beispiele
Doppelte Animation bei Wisch-Gesten vermeiden
// SPA-Router mit View Transitions
const renderRoute = async (url) => {
const { pathname } = new URL(url);
document.querySelector('main').textContent = `Seite: ${pathname}`;
};
navigation.addEventListener('navigate', (event) => {
if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
event.intercept({
handler: async () => {
// Browser hat schon animiert (z. B. Zurück-Wischen) → nur DOM aktualisieren
if (event.hasUAVisualTransition || !document.startViewTransition) {
await renderRoute(event.destination.url);
return;
}
// Sonst eigene Transition abspielen
const transition = document.startViewTransition(() =>
renderRoute(event.destination.url)
);
await transition.finished;
},
});
});Wert zu Diagnosezwecken protokollieren
navigation.addEventListener('navigate', (event) => {
console.log(
`Navigation (${event.navigationType}) nach ${event.destination.url}`,
'– UA-Transition:', event.hasUAVisualTransition
);
});
// Programmatische Navigation: Browser animiert nicht
navigation.navigate('/produkte');Feature-Erkennung mit Fallback
const supportsNavigationApi = 'navigation' in window;
const supportsUAFlag =
supportsNavigationApi &&
'NavigateEvent' in window &&
'hasUAVisualTransition' in NavigateEvent.prototype;
console.log({ supportsNavigationApi, supportsUAFlag });
const skipOwnAnimation = (event) =>
supportsUAFlag ? event.hasUAVisualTransition : false;// Wichtig · Fallstricke
- Browser-Unterstützung: Die Navigation API und diese Eigenschaft sind vor allem in Chromium-Browsern verfügbar (
hasUAVisualTransitionab Version 123). In anderen Browsern fehltwindow.navigationteils ganz. Prüfe deshalb vorher mit Feature-Erkennung, ob sie vorhanden ist. - Der Wert ist in der Praxis fast nur bei Traverse-Navigationen (
navigationType === 'traverse') durch Gestentrue. Beinavigation.navigate(), Link-Klicks oder Formular-Übermittlungen ist er normalerweisefalse. - Ob und wann der Browser eine eigene Transition zeigt, hängt vom Browser und von der Plattform ab. Verlass dich nicht darauf, dass es sie gibt. Nutze die Eigenschaft nur, um die eigene Animation wegzulassen.
- Ist der Wert
true, zeigt der Browser schon den Zielzustand an. Aktualisiere das DOM dann ohne Verzögerung, sonst ist kurz veralteter Inhalt zu sehen. - Die Eigenschaft ist schreibgeschützt. Zuweisungen haben keine Wirkung.