GlobalEventHandlers.onanimationcancel

Обработчик события animationcancel . Это событие вызывается когда CSS Анимация (CSS Animation) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения animationend (en-US) ), например, когда изменяется animation-name, анимация удаляется или когда элемент с анимацией оказывается скрыт (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS.

Синтаксис

var animCancelHandler = target.onanimationcancel;

target.onanimationcancel = Function

Значения

Функция Function вызывается когда animationcancel происходит событие, указывающее, что CSS-анимация запустилась на объекте target, где объект target object это HTML-элемент (HTMLElement), документ (Document), или окно (Window). Эта функция принимает один параметр AnimationEvent - объект, описывающий событие, которое произошло.

Пример

HTML content

html

<div class="main">
  <div id="box" onanimationcancel="handleCancelEvent(event);">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="toggleBox">Hide the Box</div>

<pre id="log"></pre>

CSS content

Опустим некоторые фрагменты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определённую анимацию animation. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события.

css

#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788ff;
  margin: 0;
  position: relative;
  background-color: #2233ff;
  display: flex;
  justify-content: center;
  animation: 5s ease-in-out 0s infinite alternate both slideBox;
}

Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.

css

@keyframes slideBox {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: calc(100% - var(--boxwidth));
    top: calc(100% - var(--boxwidth));
  }
}

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

JavaScript content

Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование AnimationEvent.animationName (en-US) и AnimationEvent.elapsedTime (en-US), чтобы получить информацию о произошедшем событии.

js

function log(msg, event) {
  let logBox = document.getElementById("log");

  logBox.innerHTML += msg;

  if (event) {
    logBox.innerHTML +=
      " <code>" +
      event.animationName +
      "</code> at time " +
      event.elapsedTime.toFixed(2) +
      " seconds.";
  }

  logBox.innerHTML += "\n";
}

Затем мы устанавливаем обработчик событий handleCancelEvent() - функцию, которая вызывается в ответ на событие animationcancel. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.

js

function handleCancelEvent(event) {
  log("Animation canceled", event);
}

Теперь добавим переключение display между "flex" и "none" и установим обработчик события щелчка click (en-US) на кнопке "Hide/Show":

js

document.getElementById("toggleBox").addEventListener("click", function () {
  if (box.style.display == "none") {
    box.style.display = "flex";
    document.getElementById("toggleBox").innerHTML = "Hide the box";
  } else {
    box.style.display = "none";
    document.getElementById("toggleBox").innerHTML = "Show the box";
  }
});

Таким образом переключение стилей элемента display: none приводит к прерыванию анимации. In browsers that support animationcancel, the event is fired and this handler is called.

Примечание: At this time, no major browser supports animationcancel.

Result

Assembled together, you get this:

If your browser supports animationcancel, hiding the box using the button will cause a message to be displayed about the event.

Specification

Specification
CSS Animations Level 1
# eventdef-globaleventhandlers-animationcancel

Browser compatibility

BCD tables only load in the browser

See also