Document: startViewTransition()-Methode

updateCallback Optional

Eine optionale Callback-Funktion, die typischerweise verwendet wird, um das DOM während des SPA-View-Übergangsprozesses zu aktualisieren, und die ein Promise zurückgibt. Der Callback wird aufgerufen, sobald die API einen Schnappschuss der aktuellen Seite erstellt hat. Wenn das von dem Callback zurückgegebene Promise erfüllt wird, beginnt der View-Übergang im nächsten Frame. Wenn das von dem Callback zurückgegebene Promise abgelehnt wird, wird der Übergang abgebrochen.

Eine ViewTransition-Objektinstanz.

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

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());
}

• Smooth and simple transitions with the View Transitions API