Обработчик события 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
:root {
--boxwidth:50px;
}
.main {
width: 300px;
height:300px;
border: 1px solid black;
}
.button {
cursor: pointer;
width: 300px;
border: 1px solid black;
font-size: 16px;
text-align: center;
margin-top: 0;
padding-top: 2px;
padding-bottom: 4px;
color: white;
background-color: darkgreen;
font: 14px "Open Sans", "Arial", sans-serif;
}
#text {
width: 46px;
padding: 10px;
position: relative;
text-align: center;
align-self: center;
color: white;
font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
}
Опустим некоторые фрагмнты 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
- The
animationcancel
event this event handler is triggered by. AnimationEvent