Dokumentation: Methode startViewTransition()

Baseline 2025 *

Newly available

Since ⁨October 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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

Wenn startViewTransition() aufgerufen wird, wird eine Abfolge von Schritten ausgeführt, wie im Abschnitt Der View Transition Prozess erklärt.

Eine optionale Callback-Funktion, die typischerweise aufgerufen wird, um das DOM während des SPA-View Transition-Prozesses zu aktualisieren, und die ein Promise zurückgibt. Der Callback wird aufgerufen, sobald die API eine Momentaufnahme der aktuellen Seite gemacht hat. Wenn das von dem Callback zurückgegebene Promise erfüllt ist, beginnt die View Transition im nächsten Frame. Wenn das Promise, das vom Callback zurückgegeben wird, abgelehnt wird, wird die Transition abgebrochen.

options Optional

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

update Optional: Die gleiche updateCallback-Funktion wie oben beschrieben. Standardmäßig null.
types Optional: Ein Array von Strings. Diese Strings fungieren als Klassennamen oder Bezeichner für die Transition und ermöglichen es Ihnen, CSS-Stile selektiv anzuwenden oder unterschiedliche JavaScript-Logik basierend auf dem Typ der stattfindenden Transition auszuführen. Standardmäßig eine leere Sequenz.

Rückgabewert

Eine Instanz des ViewTransition-Objekts.

Beispiele

Verwendung einer gleichen Dokument-View Transition

In dieser gleichen Dokument-View Transition überprüfen wir, ob der Browser View Transitions unterstützt. Wenn keine Unterstützung vorhanden ist, setzen wir die Hintergrundfarbe mit einer Ersatzmethode, die sofort angewendet wird. Andernfalls können wir sicher document.startViewTransition() mit Animationsregeln aufrufen, die wir in CSS definieren.

html

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

Wir setzen die animation-duration auf 2 Sekunden mit dem ::view-transition-group-Pseudoelement.

css

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 beim Klicken auf den Button die Farbe über 2 Sekunden von einer zur anderen übergehen. Andernfalls wird die Hintergrundfarbe ohne Animation mit einer Ersatzmethode gesetzt.