javascript - addEventListener() 无法多次工作。纯javascript

Question

我尝试使用纯 Javascript 进行代码挑战，但 addEventListener 上的函数仅工作一次。我试图在网上寻找可能的答案，但显然有些东西不起作用。

这是我的代码!

var btn = document.getElementById("next");

btn.addEventListener("click", clickDelay);

function clickDelay(){
document.getElementById("testing").classList.add("mystyle");
setTimeout(function() {
    document.getElementById("testing").classList.add("new-style");
}, 1000); }

SASS 在这里

.mystyle
animation: animatedBackground 10s linear infinite

.new-style
animation-play-state: paused

请帮忙!

Answer 1

当元素已经是该类的成员时，添加类 mystyle 将不会产生任何效果。

你应该改变你的逻辑，以便:

• 默认情况下，animation 属性在元素上设置(即不需要通过 JS 添加类)。
• 元素上的animation-play-state 设置为paused(默认情况下也如上所述)。
• 使用 JS 添加类会将 animation-play-state 更改为 running
• 您传递给 setTimeout 的函数会删除该类(这会将 animation-play-state 设置回 paused.