CSS3動畫已經成為了網頁設計中的一個重要部分。在很多情況下,我們需要在動畫結束后執行一些特定的操作,因此我們需要知道如何判斷CSS3動畫是否結束了。下面介紹一些方法。
/* 方法一:使用動畫結束事件 */
var element = document.getElementById('myElement');
element.addEventListener("animationend", function() {
// 動畫結束后執行的操作
});
/* 方法二:使用transitionEnd事件 */
var element = document.getElementById('myElement');
element.addEventListener("transitionend", function() {
// 過渡結束后執行的操作
});
/* 方法三:使用JavaScript定時器 */
var element = document.getElementById('myElement');
var duration = 1000; // 動畫持續時間
var startTime = null;
function step(timestamp) {
if (!startTime) {
startTime = timestamp;
}
var progress = timestamp - startTime;
element.style.left = Math.min(progress / duration * 100, 100) + '%';
if (progress< duration) {
window.requestAnimationFrame(step);
} else {
// 動畫結束后執行的操作
}
}
window.requestAnimationFrame(step);
以上三種方法都可以判斷CSS3動畫是否結束。第一種方法使用animationend事件來監聽動畫結束,第二種方法使用transitionend事件來監聽過渡結束,第三種方法則使用JavaScript定時器來檢測動畫結束的時間點。根據需要選擇不同的方法即可。