ViewTransition: свойство finished

Ограниченная доступность

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

Чтение-только свойство finished интерфейса ViewTransition — это Promise, которое выполняется после завершения анимации перехода и отображения нового представления страницы, доступного для взаимодействия пользователя.

finished будет отклонено только в случае перехода внутри одного документа (SPA), если вызываемая функция, переданная в document.startViewTransition(), сгенерирует ошибку или вернёт промис, который отклоняется. Это указывает на то, что новое состояние страницы не было создано.

Если анимация перехода не запускается или пропускается во время перехода с помощью ViewTransition.skipTransition(), конечное состояние всё равно достигается, поэтому finished всё равно выполнится.

Значение

Промис.

Примеры

Различные переходы для различных навигаций

Иногда определённые навигации требуют специально настроенных переходов, например, навигация «Назад» может потребовать другой переход, чем навигация «Вперёд». Лучший способ справиться с такими случаями — задать имя класса элементу <html> , обработать переход — применить правильную анимацию с помощью настраиваемого селектора — и затем удалить имя класса после завершения перехода.

async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}

Примечание: isBackNavigation — это не встроенная функция; это теоретическая функция, которую можно реализовать с помощью API навигации или аналогичным образом.

Спецификации

Спецификация
Модуль CSS View Transitions уровня 1 # dom-viewtransition-finished

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`finished`	111	111	Нет	97	18	111	Нет	75	18	22.0	111

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/finished