Dokument: Methode startViewTransition()
Baseline 2025
Neu verfügbar
Seit Oktober 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die Methode startViewTransition() der Schnittstelle Document startet eine neue, auf das Dokument beschränkte View Transition innerhalb desselben Dokuments (SPA) und gibt ein ViewTransition-Objekt zurück, das diese repräsentiert.
Die Abfolge der Schritte beim Aufruf von startViewTransition() wird im Abschnitt Der Ablauf einer View Transition erläutert.
Syntax
startViewTransition()
startViewTransition(updateCallback)
startViewTransition(options)
Parameter
updateCallbackOptional-
Eine Callback-Funktion, die aufgerufen wird, um das DOM während der SPA-View-Transition zu aktualisieren. Sie gibt ein
Promisezurück. Der Callback wird aufgerufen, nachdem die API einen Schnappschuss der aktuellen Seite erstellt hat. Wenn das vom Callback zurückgegebene Promise erfüllt wird, beginnt die View Transition im nächsten Frame. Wenn es zurückgewiesen wird, wird die Transition abgebrochen. optionsOptional-
Ein Objekt mit Optionen zur Konfiguration der View Transition. Es kann die folgenden Eigenschaften enthalten:
updateOptional-
Dieselbe oben beschriebene
updateCallback-Funktion. Der Standardwert istnull. typesOptional-
Ein Array von Zeichenfolgen, die die auf die View Transition angewendeten Typen angeben. View-Transition-Typen ermöglichen es, CSS-Stile oder JavaScript-Logik gezielt anhand des jeweiligen Transition-Typs anzuwenden. Der Standardwert ist ein leeres Array.
Rückgabewert
Eine Instanz des Objekts ViewTransition.
Beispiele
Eine Liste vollständiger Beispiele finden Sie unter View Transition API > Beispiele.
Grundlegende Verwendung
Bei dieser View Transition innerhalb desselben Dokuments prüfen wir, ob der Browser View Transitions unterstützt.
Falls nicht, setzen wir die Hintergrundfarbe mit einer Ausweichmethode, die sofort angewendet wird.
Andernfalls können wir document.startViewTransition() aufrufen und dabei die in CSS definierten Animationsregeln nutzen.
<main>
<section></section>
<button id="change-color">Change color</button>
</main>
Mithilfe des Pseudoelements ::view-transition-group setzen wir die animation-duration auf 2 Sekunden.
html {
--bg: indigo;
}
main {
display: flex;
flex-direction: column;
gap: 5px;
}
section {
background-color: var(--bg);
height: 60px;
border-radius: 5px;
}
::view-transition-group(root) {
animation-duration: 2s;
}
const colors = ["darkred", "darkslateblue", "darkgreen"];
const colBlock = document.querySelector("section");
let count = 0;
const updateColor = () => {
colBlock.style = `--bg: ${colors[count]}`;
count = count !== colors.length - 1 ? ++count : 0;
};
const changeColor = () => {
// Fallback for browsers that don't support View Transitions:
if (!document.startViewTransition) {
updateColor();
return;
}
// With View Transitions:
const transition = document.startViewTransition(() => {
updateColor();
});
};
const changeColorButton = document.querySelector("#change-color");
changeColorButton.addEventListener("click", changeColor);
changeColorButton.addEventListener("keypress", changeColor);
Wenn View Transitions unterstützt werden, wechselt die Farbe beim Klicken auf die Schaltfläche innerhalb von 2 Sekunden von einer Farbe zur anderen. Andernfalls wird die Hintergrundfarbe ohne Animation mit einer Ausweichmethode gesetzt.
Spezifikationen
| Spezifikation |
|---|
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |
| CSS View Transitions Module Level 2 # dom-document-startviewtransition |