Signatur
Beschreibung
Die schreibgeschützte Eigenschaft transitionRoot eines ViewTransition-Objekts verweist auf das Wurzelelement des Übergangsbereichs. An diesem Element hängt der Pseudo-Element-Baum der Transition (::view-transition, ::view-transition-group() usw.). Nur dieser Teilbaum wird während der Animation erfasst und überlagert.
Wird ein Übergang klassisch mit document.startViewTransition() gestartet, ist transitionRoot das Element <html> (document.documentElement). Bei Scoped View Transitions, also mit element.startViewTransition(), ist es das Element, auf dem die Methode aufgerufen wurde. So können mehrere unabhängige Übergänge gleichzeitig in verschiedenen Bereichen der Seite laufen, etwa in einer Karte oder Liste, ohne den Rest der Seite zu blockieren.
Brauchen kannst du die Eigenschaft vor allem in generischem Code, der ein ViewTransition-Objekt übergeben bekommt und herausfinden muss, welcher Bereich betroffen ist. Typische Fälle: Während der Animation Klassen setzen, Interaktionen sperren, Übergänge protokollieren oder gezielt die Pseudo-Elemente eines bestimmten Bereichs per Web Animations API ansteuern.
Rückgabewert
document.documentElement, bei Scoped View Transitions das Element, auf dem startViewTransition() aufgerufen wurde.Beispiele
Wurzel eines Dokument-Übergangs abfragen
if (document.startViewTransition) {
const transition = document.startViewTransition(() => {
document.body.classList.toggle('dark');
});
// Fallback, falls transitionRoot noch nicht unterstützt wird
const root = transition.transitionRoot ?? document.documentElement;
console.log(root.tagName);
console.log(root === document.documentElement);
}Scoped View Transition auf einer Karte
const card = document.querySelector('#produkt-karte');
const updateCard = () => {
card.querySelector('.preis').textContent = '19,99 €';
};
if (typeof card.startViewTransition === 'function') {
const transition = card.startViewTransition(updateCard);
console.log(transition.transitionRoot === card);
console.log(transition.transitionRoot.id);
} else {
updateCard(); // ohne Animation aktualisieren
}Bereich während der Animation für Interaktionen sperren
const runScopedTransition = async (element, update) => {
if (typeof element.startViewTransition !== 'function') {
update();
return;
}
const transition = element.startViewTransition(update);
const root = transition.transitionRoot;
root.setAttribute('inert', '');
root.classList.add('is-transitioning');
try {
await transition.finished;
} finally {
root.removeAttribute('inert');
root.classList.remove('is-transitioning');
console.log(`Übergang in #${root.id} abgeschlossen`);
}
};
const liste = document.querySelector('#todo-liste');
runScopedTransition(liste, () => liste.lastElementChild?.remove());// Wichtig · Fallstricke
- Kompatibilität:
transitionRootkam zusammen mit den Scoped View Transitions (Element.prototype.startViewTransition()) und wird bisher nur in aktuellen Chromium-Browsern unterstützt. Firefox und Safari unterstützen zwar teilsdocument.startViewTransition(), aber nicht unbedingt diese Eigenschaft. Prüfe die Unterstützung vorher, zum Beispiel mit'transitionRoot' in ViewTransition.prototype, oder nutze?? document.documentElementals Ersatzwert. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert oder wirft im Strict Mode einen
TypeError. - Bei Scoped Transitions sollte das Wurzelelement Layout- bzw. Paint-Containment erhalten (z. B.
contain: layout), sonst verhält sich der Übergang unerwartet. Die Pseudo-Elemente sprichst du in CSS über das Element an, z. B.#karte::view-transition-group(*). - Wird das Wurzelelement während des Übergangs aus dem DOM entfernt, bricht der Browser den Übergang ab.
finishedwird trotzdem erfüllt,readykann dagegen abgelehnt werden. - Die Spezifikation (CSS View Transitions Level 2) ist noch in Arbeit. Name und Verhalten können sich noch ändern.