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

Метод commitStyles() интерфейса API веб-анимаций's Animation записывает вычисленные значения текущих стилей анимации в атрибут вычисленных значений целевого элемента style. commitStyles() работает даже если анимация была автоматически удалена.

commitStyles() может быть использован в сочетании с fill для сохранения конечного состояния анимации после её завершения. Тот же эффект можно получить с помощью fill в одиночку, но использование анимаций с неопределённым заполнением не рекомендуется. Анимации имеют приоритет над всеми статическими стилями, поэтому анимация с неопределённым заполнением может препятствовать нормальному стилизации целевого элемента.

Использование commitStyles() записывает состояние стилей в атрибут style элемента, где их можно изменять и перезаписывать как обычно.

Нет.

Нет (undefined).

В этом примере у нас две кнопки, обозначенные как «Сохранить стили» и «Заполнить вперёд». Обе кнопки выполняют анимацию при нажатии и сохраняют конечное состояние анимации.

Разница заключается в том, что «Заполнить вперёд» использует только fill: "forwards" для сохранения конечного состояния анимации: это означает, что браузеру необходимо бесконечно поддерживать состояние анимации или до момента её автоматического удаления.

Однако, кнопка «Сохранить стили» ждёт завершения анимации, затем вызывает commitStyles(), затем отменяет анимацию, чтобы записанное конечное состояние было захвачено как значение атрибута style, а не как состояние анимации.

HTML

<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>

JavaScript

const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});

Результат

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