元素：animationcancel 事件
animationcancel 事件在 CSS 動畫意外中止時觸發。換句話說，在沒有傳送 animationend 事件的情況下停止執行時，就會觸發此事件。這可能發生在 animation-name 被更改導致動畫被移除時，或者當動畫節點使用 CSS 隱藏時。因此，可能是直接隱藏，或者因為其包含的任何節點被隱藏。
可以透過設定 onanimationcancel 屬性或使用 addEventListener() 來為此事件新增事件處理程式。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("animationcancel", (event) => { })
onanimationcancel = (event) => { }
事件型別
一個 AnimationEvent。繼承自 Event。
事件屬性
也繼承自其父級 Event 的屬性.
AnimationEvent.animationName只讀-
一個字串，包含生成動畫的
animation-name的值。 AnimationEvent.elapsedTime只讀-
一個
float，表示在觸發此事件時，動畫已執行的時間（以秒為單位），不包括動畫暫停的任何時間。對於animationstart事件，elapsedTime為0.0，除非animation-delay的值為負，在這種情況下，事件將以elapsedTime為(-1 * delay)觸發。 AnimationEvent.pseudoElement只讀-
一個字串，以
'::'開頭，包含動畫執行的 偽元素的名稱。如果動畫不在偽元素上執行，而是在元素上執行，則為空字串：''。
示例
此程式碼獲取一個當前正在進行動畫的元素，併為 animationcancel 事件新增一個監聽器。然後將元素的 display 屬性設定為 none，這將觸發 animationcancel 事件。
js
const animated = document.querySelector(".animated");
animated.addEventListener("animationcancel", () => {
console.log("Animation canceled");
});
animated.style.display = "none";
與上面相同，但使用 onanimationcancel 屬性而不是 addEventListener()。
js
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
console.log("Animation canceled");
};
animated.style.display = "none";
即時示例
HTML
html
<div class="animation-example">
<div class="container">
<p class="animation">You chose a cold night to visit our planet.</p>
</div>
<button class="activate" type="button">Activate animation</button>
<div class="event-log"></div>
</div>
CSS
css
.container {
height: 3rem;
}
.event-log {
width: 25rem;
height: 2rem;
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
}
.animation.active {
animation-duration: 2s;
animation-name: slide-in;
animation-iteration-count: 2;
}
@keyframes slide-in {
from {
transform: translateX(100%) scaleX(3);
}
to {
transform: translateX(0) scaleX(1);
}
}
JavaScript
js
const animation = document.querySelector("p.animation");
const animationEventLog = document.querySelector(
".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
".animation-example>button.activate",
);
let iterationCount = 0;
animation.addEventListener("animationstart", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});
animation.addEventListener("animationiteration", () => {
iterationCount++;
animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});
animation.addEventListener("animationend", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
animation.classList.remove("active");
applyAnimation.textContent = "Activate animation";
});
animation.addEventListener("animationcancel", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});
applyAnimation.addEventListener("click", () => {
animation.classList.toggle("active");
animationEventLog.textContent = "";
iterationCount = 0;
const active = animation.classList.contains("active");
applyAnimation.textContent = active
? "Cancel animation"
: "Activate animation";
});
結果
規範
| 規範 |
|---|
| CSS 動畫級別 1 # eventdef-globaleventhandlers-animationcancel |
瀏覽器相容性
載入中…