首頁 > web前端 > css教學 > 如何僅使用 JavaScript 暫停和恢復 CSS3 動畫?

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

Linda Hamilton
發布: 2024-12-07 10:43:11
原創
689 人瀏覽過

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

使用JavaScript 暫停和恢復CSS3 動畫

問題:

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

解決方案:

  1. CSS 動畫:

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

  1. 暫停和恢復函數:

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

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

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};
登入後複製
  1. 活動監聽器:

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

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板