Element: sự kiện animationend
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2019.
Sự kiện animationend được kích hoạt khi một CSS Animation đã hoàn thành. Nếu hoạt ảnh bị hủy trước khi hoàn thành, chẳng hạn như khi phần tử bị xóa khỏi DOM hoặc hoạt ảnh bị xóa khỏi phần tử, sự kiện animationend sẽ không được kích hoạt.
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("animationend", (event) => { })
onanimationend = (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ụ
Ví dụ này lấy một phần tử đang được hoạt ảnh và lắng nghe sự kiện animationend:
const animated = document.querySelector(".animated");
animated.addEventListener("animationend", () => {
console.log("Animation ended");
});
Tương tự, nhưng sử dụng thuộc tính trình xử lý sự kiện onanimationend:
const animated = document.querySelector(".animated");
animated.onanimationend = () => {
console.log("Animation ended");
};
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
| Specification |
|---|
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationend |
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,animationcancel,animationiteration