ViewTransition

Интерфейс ViewTransition API переходов между представлениями описывает активный переход между представлениями и предоставляет функциональность для реагирования на переход в различные состояния (например, готовность к запуску анимации или завершение анимации) или пропуск перехода.

Этот тип объекта доступен следующим образом:

• В случае переходов внутри одного документа (SPA) он возвращается методом document.startViewTransition().
• В случае переходов между разными документами (MPA) он доступен:
  • На выходящей странице через свойство объекта события pageswap PageSwapEvent.viewTransition.
  • На входящей странице через свойство объекта события pagereveal PageRevealEvent.viewTransition.

Когда переход между представлениями инициируется вызовом startViewTransition() (или переходом на другую страницу в случае переходов между разными документами), выполняется последовательность шагов, описанных в Процессе перехода между представлениями. Там же описано, когда выполняются различные промисы.

ViewTransition.finished Только для чтения

Промис Promise, который выполняется, когда анимация перехода завершена, и новое представление страницы доступно и интерактивно для пользователя.

ViewTransition.ready Только для чтения

Промис Promise, который выполняется, когда псевдоэлементное дерево создано, и анимация перехода собирается начаться.

ViewTransition.updateCallbackDone Только для чтения

Промис Promise, который выполняется, когда промис, возвращаемый обратным вызовом метода document.startViewTransition(), выполняется.

skipTransition()

Пропускает анимационную часть перехода между представлениями, но не пропускает выполнение обратного вызова document.startViewTransition(), который обновляет DOM.

В приведенном ниже примере SPA используется промис ViewTransition.ready для запуска пользовательской анимации кругового раскрытия представления, исходящей из позиции курсора пользователя при щелчке, с анимацией, предоставленной API Web Animations API.

// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

Для этой анимации также требуется следующий CSS, чтобы отключить стандартную анимацию CSS и остановить смешивание старого и нового состояний представления (новое состояние «накладывается» поверх старого состояния, а не переходит плавно):

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

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