Element: sự kiện animationcancel
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Sự kiện animationcancel được kích hoạt khi một CSS Animation bị hủy bất ngờ. Nói cách khác, bất cứ khi nào nó dừng chạy mà không gửi sự kiện animationend. Điều này có thể xảy ra khi animation-name bị thay đổi dẫn đến hoạt ảnh bị xóa, hoặc khi nút đang hoạt ảnh bị ẩn bằng CSS. Do đó, trực tiếp hoặc vì bất kỳ nút chứa nào của nó bị ẩn.
Trình xử lý sự kiện cho sự kiện này có thể được thêm vào bằng cách thiết lập thuộc tính onanimationcancel, hoặc sử dụng addEventListener().
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập thuộc tính trình xử lý sự kiện.
addEventListener("animationcancel", (event) => { })
onanimationcancel = (event) => { }
Kiểu sự kiện
Một AnimationEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Cũng kế thừa các thuộc tính từ Event cha.
AnimationEvent.animationNameRead only-
Một chuỗi chứa giá trị của
animation-nameđã tạo ra hoạt ảnh. AnimationEvent.elapsedTimeRead only-
Một
floatcho biết khoảng thời gian hoạt ảnh đã chạy, tính bằng giây, khi sự kiện này được kích hoạt, loại trừ bất kỳ thời gian nào hoạt ảnh bị tạm dừng. Đối với sự kiệnanimationstart,elapsedTimelà0.0trừ khi có giá trị âm choanimation-delay, trong trường hợp đó sự kiện sẽ được kích hoạt vớielapsedTimechứa(-1 * delay). AnimationEvent.pseudoElementRead only-
Một chuỗi, bắt đầu bằng
'::', chứa tên của pseudo-element mà hoạt ảnh chạy trên đó. Nếu hoạt ảnh không chạy trên pseudo-element mà trên phần tử, là một chuỗi rỗng:''.
Ví dụ
Đoạn mã này lấy một phần tử đang được hoạt ảnh và thêm một trình lắng nghe cho sự kiện animationcancel. Sau đó thiết lập thuộc tính display của phần tử thành none, điều này sẽ kích hoạt sự kiện animationcancel.
const animated = document.querySelector(".animated");
animated.addEventListener("animationcancel", () => {
console.log("Animation canceled");
});
animated.style.display = "none";
Tương tự, nhưng sử dụng thuộc tính onanimationcancel thay vì addEventListener():
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
console.log("Animation canceled");
};
animated.style.display = "none";
Ví dụ trực tiếp
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
.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
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";
});
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |
Tương thích trình duyệt
Xem thêm
- CSS Animations
- Using CSS Animations
AnimationEvent- Các sự kiện liên quan:
animationstart,animationend,animationiteration