Dokumentation: startViewTransition() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Wenn startViewTransition() aufgerufen wird, wird eine Abfolge von Schritten durchgeführt, wie in Der Prozess der Ansichtstransition erklärt.

Syntax

js
startViewTransition()
startViewTransition(updateCallback)

Parameter

updateCallback Optional

Eine optionale Callback-Funktion, die typischerweise dazu aufgerufen wird, das DOM während des SPA-Übergangsprozesses zu aktualisieren und die ein Promise zurückgibt. Der Callback wird aufgerufen, nachdem die API eine Momentaufnahme der aktuellen Seite gemacht hat. Wenn das von dem Callback zurückgegebene Versprechen erfüllt wird, beginnt der Übergang im nächsten Frame. Wenn das Versprechen zurückgewiesen wird, wird der Übergang abgebrochen.

Rückgabewert

Eine Instanz eines ViewTransition-Objekts.

Beispiele

Grundlegende Verwendung

In unserem Grundlegenden SPA View Transitions Demo verwaltet die updateView()-Funktion sowohl Browser, die die View Transition API unterstützen, als auch solche, die es nicht tun. In unterstützenden Browsern rufen wir startViewTransition() auf, um den Übergangsprozess auszulösen, ohne uns um den Rückgabewert zu kümmern.

js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

Spezifikationen

Specification
CSS View Transitions Module Level 1
# dom-document-startviewtransition

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch