Dokument: startViewTransition()-Methode

Die startViewTransition()-Methode der Document-Schnittstelle startet eine neue, dokumentlokale (SPA) View Transition und gibt ein ViewTransition-Objekt zurück, das diese repräsentiert.

Die Abfolge der Schritte, die ausgeführt werden, wenn startViewTransition() aufgerufen wird, wird im Abschnitt der View Transition-Prozess erklärt.

Syntax

startViewTransition()
startViewTransition(updateCallback)
startViewTransition(options)

Parameter

updateCallback Optional

Eine Callback-Funktion, die aufgerufen wird, um den DOM während des SPA View Transition-Prozesses zu aktualisieren. Sie gibt ein Promise zurück. Der Callback wird aufgerufen, sobald die API einen Snapshot der aktuellen Seite gemacht hat. Wenn das von dem Callback zurückgegebene Promise erfüllt wird, beginnt die View Transition im nächsten Frame. Wenn das von dem Callback zurückgegebene Promise abgelehnt wird, wird die Transition abgebrochen.

options Optional

Ein Objekt, das Optionen zur Konfiguration der View Transition enthält. Es kann die folgenden Eigenschaften enthalten:

update Optional

Die gleiche updateCallback-Funktion wie oben beschrieben. Standardwert ist null.

types Optional

Ein Array von Zeichenketten, das die auf die View Transition angewendeten Typen repräsentiert. Die Typen der View Transition ermöglichen die selektive Anwendung von CSS-Stilen oder JavaScript-Logik basierend auf dem Übergangstyp, der auftritt. Standardwert ist ein leeres Array.

Rückgabewert

Eine Instanz des ViewTransition-Objekts.

Beispiele

Siehe View Transition API > Beispiele für eine Liste vollständiger Beispiele.

Grundlegende Verwendung

In dieser dokumentinternen View Transition prüfen wir, ob der Browser View Transitions unterstützt. Wenn es keine Unterstützung gibt, setzen wir die Hintergrundfarbe mit einer Fallback-Methode, die sofort angewendet wird. Andernfalls können wir sicher document.startViewTransition() mit Animationsregeln aufrufen, die wir in CSS definieren.

<main>
 <section></section>
 <button id="change-color">Change color</button>
</main>

Wir setzen die animation-duration auf 2 Sekunden unter Verwendung des ::view-transition-group-Pseudoelements.

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, wird durch Klicken auf den Button die Farbe innerhalb von 2 Sekunden von einer in die andere übergehen. Andernfalls wird die Hintergrundfarbe ohne Animation mit einer Fallback-Methode gesetzt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Document.activeViewTransition
• Element.startViewTransition()
• :active-view-transition Pseudoklasse
• :active-view-transition-type() Pseudoklasse
• View Transition API
• Verwendung der View Transition API
• Verwendung von View Transition Typen
• Sanfte Übergänge mit der View Transition API