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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
startViewTransition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch