GlobalEventHandlers.onanimationcancel
Обработчик события animationcancel
. Это событие вызывается когда анимация (CSS Animation) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения animationend
), например, когда изменяется animation-name
, анимация удаляется или когда элемент с анимацией оказывается скрыт (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS.
Синтаксис
var animCancelHandler = target.onanimationcancel;
target.onanimationcancel = Function
Значения
Функция Function
вызывается когда происходит событие animationcancel
, указывающее, что CSS-анимация запустилась на объекте target, который представляет 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 |
---|
CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- The
animationcancel
event this event handler is triggered by. AnimationEvent