Element: sự kiện animationstart
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 animationstart được kích hoạt khi một CSS Animation đã bắt đầu. Nếu có animation-delay, sự kiện này sẽ được kích hoạt sau khi khoảng thời gian trễ đã hết. Một giá trị trễ âm sẽ khiến sự kiện được kích hoạt với elapsedTime bằng giá trị tuyệt đối của độ trễ (và tương ứng, hoạt ảnh sẽ bắt đầu phát tại chỉ số thời gian đó trong chuỗi).
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("animationstart", (event) => { })
onanimationstart = (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ắng nghe sự kiện animationstart và ghi lại thông báo khi nó được kích hoạt:
const animated = document.querySelector(".animated");
animated.addEventListener("animationstart", () => {
console.log("Animation started");
});
Tương tự, nhưng sử dụng onanimationstart:
const animated = document.querySelector(".animated");
animated.onanimationstart = () => {
console.log("Animation started");
};
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-animationstart |
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:
animationend,animationiteration,animationcancel