Document: startViewTransition() method

updateCallback Optional

An optional callback function typically invoked to update the DOM during the SPA view transition process, which returns a Promise. The callback is invoked once the API has taken a snapshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.

A ViewTransition object instance.

In our Basic SPA View Transitions demo, the updateView() function handles both browsers that do and don't support the View Transition API. In supporting browsers, we invoke startViewTransition() to trigger the view transition process without worrying about the return value.

function updateView(event) {
  // Handle the difference in whether the event is fired on the  or the 
  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 transitions with the View Transition API