Element: sự kiện animationiteration
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 animationiteration được kích hoạt khi một lần lặp của CSS Animation kết thúc và một lần lặp khác bắt đầu. Sự kiện này không xảy ra cùng lúc với sự kiện animationend, và do đó không xảy ra đối với các hoạt ảnh có animation-iteration-count bằng mộ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("animationiteration", (event) => { })
onanimationiteration = (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 sử dụng animationiteration để theo dõi số lần lặp mà hoạt ảnh đã hoàn thành:
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.addEventListener("animationiteration", () => {
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
});
Tương tự, nhưng sử dụng thuộc tính trình xử lý sự kiện onanimationiteration:
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.onanimationiteration = () => {
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
};
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-animationiteration |
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,animationcancel