MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Синтакс

var animCancelHandler = target.onanimationcancel;

target.onanimationcancel = Function

Значения

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

Пример

HTML content

<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. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. 

#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;
} 
 

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

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

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

JavaScript content

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

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. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.

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

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

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 Status Comment
CSS Animations
Определение 'onanimationcancel' в этой спецификации.
Рабочий черновик  

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Basic support Нет 54 (54) ? ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? Нет 54.0 (54) ? ? ? ? Нет

See also

Метки документа и участники

 Внесли вклад в эту страницу: FlowerDeLuce
 Обновлялась последний раз: FlowerDeLuce,