Документ: метод startViewTransition()

Метод startViewTransition() интерфейса Document запускает новую переходную анимацию (SPA) для текущего документа и возвращает объект ViewTransition для её представления.

При вызове startViewTransition(), выполняется последовательность шагов, описанная в Процессе перехода.

updateCallback Необязательно

Необязательная функция обратного вызова, которая обычно вызывается для обновления DOM во время процесса перехода SPA, возвращая Promise. Функция обратного вызова вызывается после того, как API сделает моментальный снимок текущей страницы. Когда обещание, возвращённое функцией обратного вызова, выполняется, переход начинается в следующем кадре. Если возвращённое обещание отклоняется, переход отменяется.

Объект ViewTransition.

В нашем Демонстрационном примере основных переходов SPA функция updateView() обрабатывает как браузеры, поддерживающие, так и не поддерживающие API переходов. В поддерживающих браузерах вызываем startViewTransition() для запуска процесса перехода, не беспокоясь о возвращаемом значении.

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

• Гладкие переходы с помощью API переходов