Анимация: метод persist()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2020 года.

Метод persist() интерфейса API веб-анимаций' Animation явно сохраняет анимацию, предотвращая её автоматическое удаление при замене другой анимацией.

Синтаксис

persist()

Параметры

Нет.

Возвращаемое значение

Нет (undefined).

Примеры

Использование `persist()`

В этом примере есть три кнопки:

"Добавить персистентную анимацию" и "Добавить транзиентную анимацию" каждый добавляют новую анимацию преобразования к красному квадрату. Анимации чередуют направление: первая - слева направо, вторая - справа налево и так далее. "Добавить персистентную анимацию" вызывает persist() для созданной анимации.
Третья кнопка "Отменить анимацию" отменяет последнюю добавленную анимацию.

Пример отображает список всех анимаций, которые не были отменены, в порядке их добавления, вместе с replaceState каждой анимации.

HTML

<div id="animation-target"></div>
<button id="start-persistent">Add persistent animation</button>
<button id="start-transient">Add transient animation</button>
<button id="cancel">Cancel an animation</button>
<ol id="stack"></ol>

CSS

div {
  width: 100px;
  height: 100px;
  background: red;
  transform: translate(100px);
}

JavaScript

const target = document.getElementById("animation-target");
const persistentButton = document.getElementById("start-persistent");
const transientButton = document.getElementById("start-transient");
const cancelButton = document.getElementById("cancel");
persistentButton.addEventListener("click", () => startAnimation(true));
transientButton.addEventListener("click", () => startAnimation(false));
cancelButton.addEventListener("click", cancelTop);
const stack = [];

let offset = -100;

function startAnimation(persist) {
  offset = -offset;
  const animation = target.animate(
    { transform: `translate(${100 + offset}px)` },
    { duration: 500, fill: "forwards" },
  );
  stack.push(animation);
  if (persist) {
    animation.persist();
  }
  // Add the animation to the displayed stack (implementation not shown)
  show(animation, offset);
}

function cancelTop() {
  stack.pop()?.cancel();
}

Результат

Обратите внимание, что добавление новой транзиентной анимации заменит любую ранее добавленную транзиентную анимацию. Эти анимации будут автоматически удалены, и их replaceState будут "removed". Однако персистентные анимации не будут удалены.

Также обратите внимание, что удаленные анимации не влияют на отображение; положение <div> определяется последней активной или сохранённой анимацией.

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

Спецификация
Веб-анимации # dom-animation-persist

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`persist`	84	84	75	70	13.1	84	79	60	13.4	14.0	84

См. также

API веб-анимаций
Animation для других методов и свойств, которые можно использовать для управления анимацией веб-страницы.
Animation.replaceState
remove событие

© 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/Animation/persist