Signatur
Beschreibung
Die Eigenschaft viewTransition des PageRevealEvent liefert auf der Zielseite einer dokumentübergreifenden Navigation (Multi-Page-App) das ViewTransition-Objekt, das den gerade laufenden Übergang darstellt. Das Ereignis pagereveal wird ausgelöst, wenn das Dokument zum ersten Mal gerendert wird – nach dem ersten Laden oder beim Wiederherstellen aus dem Back/Forward-Cache (bfcache).
Damit kannst du auf der neuen Seite gezielt auf die Transition reagieren: Über viewTransition.types passt du die Animation an die Navigationsart an (z. B. vorwärts/rückwärts), mit viewTransition.skipTransition() brichst du sie ab, und mit den Promises ready und finished startest du eigene Animationen oder räumst hinterher auf.
Gibt es keine aktive Transition – etwa weil die Seite die Transition nicht per CSS-Regel @view-transition { navigation: auto; } aktiviert hat, die Navigation von einem anderen Ursprung kam oder der Browser die Transition übersprungen hat –, ist der Wert null. Prüfe den Wert deshalb immer, bevor du ihn benutzt.
Das Gegenstück auf der alten Seite ist PageSwapEvent.viewTransition im Ereignis pageswap.
Rückgabewert
ViewTransition-Objekt der aktiven dokumentübergreifenden Transition oder null, wenn keine Transition läuft.Beispiele
Transition auf der Zielseite erkennen
/* CSS auf beiden Seiten: @view-transition { navigation: auto; } */
window.addEventListener('pagereveal', (event) => {
if (!event.viewTransition) {
console.log('Keine View-Transition aktiv');
return;
}
console.log('View-Transition läuft');
event.viewTransition.finished.then(() => {
console.log('Transition abgeschlossen');
});
});Richtung der Navigation über Transition-Typen setzen
window.addEventListener('pagereveal', async (event) => {
const transition = event.viewTransition;
if (!transition || !navigation.activation) return;
const from = new URL(navigation.activation.from?.url ?? location.href);
const to = new URL(navigation.activation.entry.url);
// Einfache Heuristik: Zurück zur Übersicht = "backwards"
const type = to.pathname === '/' && from.pathname !== '/' ? 'backwards' : 'forwards';
transition.types.add(type);
await transition.ready;
console.log('Animation gestartet mit Typ:', type);
});
/* CSS:
html:active-view-transition-type(backwards)::view-transition-old(root) {
animation-name: slide-out-right;
}
*/Transition bei reduzierter Bewegung oder bfcache überspringen
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
window.addEventListener('pagereveal', (event) => {
if (!event.viewTransition) return;
const restored = performance.getEntriesByType('navigation')[0]?.type === 'back_forward';
if (reduceMotion.matches || restored) {
event.viewTransition.skipTransition();
console.log('Transition übersprungen');
}
});Feature-Erkennung
const supported = 'PageRevealEvent' in window &&
'viewTransition' in PageRevealEvent.prototype;
console.log('Dokumentübergreifende View-Transitions:', supported);// Wichtig · Fallstricke
- Listener früh registrieren:
pagerevealfeuert vor dem ersten Rendern. Das Skript muss daher im<head>stehen und darf nichtdefer,asyncodertype="module"verwenden – sonst ist das Ereignis schon vorbei. - Häufig
null: Ohne@view-transition { navigation: auto; }auf beiden Seiten, bei ursprungsübergreifender Navigation, bei Reload oder Timeout (ca. 4 s) gibt es keine Transition. skipTransition()bricht nur die Animation ab; die Navigation selbst läuft normal weiter. Die Promisesreadywerden dann abgelehnt – Fehler abfangen, um unbehandelte Ablehnungen zu vermeiden.- Kompatibilität: Chromium-Browser ab Version 126, Safari ab 18.2. Firefox unterstützt dokumentübergreifende View-Transitions bisher nicht – immer Feature-Erkennung verwenden und die Seite ohne Transition voll funktionsfähig halten (progressive Verbesserung).
- Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert (im strikten Modus ohne Fehler, da nur ein Getter existiert).