如何僅使用 JavaScript 暫停和恢復 CSS3 動畫？-css教學-PHP中文網

如何僅使用 JavaScript 暫停和恢復 CSS3 動畫？

Linda Hamilton

發布： 2024-12-07 10:43:11

原創

715 人瀏覽過

How Can I Pause and Resume CSS3 Animations Using Only JavaScript?

使用JavaScript 暫停和恢復CSS3 動畫

問題：

如何暫停使用JavaScript 的CSS3 動畫，無需依賴外部函式庫？

解決方案：

CSS 動畫：

使用 CSS關鍵影格定義動畫，指定每個的不透明度值和時間

暫停和恢復函數：

建立JavaScript 函數來處理暫停和恢復動畫：

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

登入後複製

活動監聽器：

向動畫元素添加事件監聽器以觸發暫停和恢復操作：

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

登入後複製

附加：

附加說明：

為了確保動畫可以多次暫停，請在添加新的事件監聽器之前清除現有的事件監聽器

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

登入後複製

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

登入後複製

或者，使用提供的答案中建議的CSS 類方法：

這允許您透過簡單地切換此CSS 來暫停和恢復動畫不需要事件監聽器的類別。

以上是如何僅使用 JavaScript 暫停和恢復 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！