Signatur
Beschreibung
Normalerweise endet ein View-Übergang, sobald alle Animationen auf den ::view-transition-*-Pseudoelementen abgeschlossen sind. Danach wird der Pseudoelementbaum entfernt und ViewTransition.finished wird aufgelöst. Mit waitUntil() kannst du dieses Ende hinauszögern: Der Browser wartet zusätzlich auf das übergebene Promise, bevor er den Übergang abschließt.
Das ist vor allem dann nützlich, wenn die Pseudoelemente nicht von zeitbasierten CSS-Animationen gesteuert werden, zum Beispiel:
- bei scroll- oder gestengesteuerten Animationen (Scroll-Driven Animations, Wisch-Gesten), deren Dauer vorher unbekannt ist,
- wenn du eigene Logik ausführst (z. B. auf eine Nutzeraktion oder Daten wartest), während die Pseudoelemente sichtbar bleiben sollen,
- wenn Animationen per Web Animations API nachträglich gestartet werden und der Browser sie sonst nicht „mitzählt“.
Du kannst waitUntil() mehrfach aufrufen; der Übergang endet erst, wenn alle übergebenen Promises erledigt sind. Die Methode selbst gibt nichts zurück – den Abschluss beobachtest du weiterhin über transition.finished.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $promise Pflicht | Promise<any> | Ein Promise, auf dessen Erledigung der Übergang warten soll, bevor er beendet und der Pseudoelementbaum entfernt wird. |
Rückgabewert
ViewTransition.finished.Beispiele
Übergang bis zu einer Nutzeraktion offenhalten
const button = document.querySelector('#weiter');
const transition = document.startViewTransition(() => {
document.body.classList.toggle('detailansicht');
});
// Pseudoelemente bleiben stehen, bis der Button geklickt wird
const klick = new Promise((resolve) => {
button.addEventListener('click', resolve, { once: true });
});
if ('waitUntil' in transition) {
transition.waitUntil(klick);
}
await transition.finished;
console.log('Übergang beendet');Eigene Web-Animation auf einem Pseudoelement abwarten
const transition = document.startViewTransition(() => {
document.querySelector('#galerie').classList.add('gross');
});
await transition.ready;
// Animation per Web Animations API auf dem Pseudoelement
const anim = document.documentElement.animate(
[{ opacity: 0, transform: 'scale(0.8)' }, { opacity: 1, transform: 'scale(1)' }],
{
duration: 800,
easing: 'ease-out',
pseudoElement: '::view-transition-new(root)'
}
);
// Sicherstellen, dass der Baum erst nach der Animation entfernt wird
transition.waitUntil?.(anim.finished);
await transition.finished;
console.log('Animation und Übergang fertig');Mehrere Promises und Zeitlimit kombinieren
const timeout = (ms) => new Promise((r) => setTimeout(r, ms));
const transition = document.startViewTransition(async () => {
const res = await fetch('/api/artikel/42');
document.querySelector('main').innerHTML = await res.text();
});
// Übergang endet erst, wenn beide Promises erledigt sind
transition.waitUntil?.(timeout(500));
transition.waitUntil?.(document.fonts.ready);
transition.finished.then(() => console.log('Pseudoelemente entfernt'));// Wichtig · Fallstricke
Browser-Unterstützung: waitUntil() stammt aus CSS View Transitions Level 2 und ist derzeit nur in Chromium-Browsern (ab ca. Version 140) verfügbar. Prüfe vorher mit 'waitUntil' in transition oder optionalem Aufruf transition.waitUntil?.(p).
Hängende Übergänge: Ein Promise, das nie erledigt wird, hält den Übergang dauerhaft offen. Die Pseudoelemente überlagern dann die Seite und können Klicks auf die echten Elemente abfangen. Kombiniere unsichere Promises daher mit einem Zeitlimit (z. B. Promise.race()).
Timing: Rufe waitUntil() auf, solange der Übergang noch läuft. Nach Abschluss (finished erledigt) hat der Aufruf keine Wirkung mehr bzw. kann je nach Implementierung einen Fehler auslösen. Eine Ablehnung des übergebenen Promises bricht den Übergang nicht ab, sondern beendet lediglich die Wartezeit.
Mit ViewTransition.skipTransition() kannst du einen verlängerten Übergang jederzeit sofort beenden.