有没有一种方法可以在点击 classList.add 时为按钮设置动画？

Question

我最近了解到，一种在单击按钮时播放动画的方法是使用

myObject.classList.add('animationClass')

向其附加动画类。但是，此方法仅在第一次单击按钮时有效——因为动画类保留在 HTML 对象中。

我想，如果我在函数开始时使用

myObject.classList.Remove('animationClass')

，我可以用我的按钮实现可重复性。

玩过这个函数后，似乎每当我实现删除类的行时，添加它的行就会被覆盖并且没有播放动画。

这是我最初尝试的代码：

myButton = document.getElementById('switchButton')
myButton.classList.remove('animationClass'); //remove the class, from previous clicks
myButton.classList.add('animationClass'); //add the class to play animation

.animationClass {
  animation: rotate forwards 1s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<button class="" id="switchButton" onclick="switchFunction()">Switch</button>

然后我尝试使用

myObject.classList.remove

延迟实现

setTimeout

，但无济于事。

JS
myObject.classList.add('animationClass');
setTimeout(function(){myObject.classList.remove('animationClass')},2s);

Answer 1

你基本上只是犯了一个小错误。你必须写

2000

（毫秒）而不是

2s

.

但是，我建议您使用

animationend

-Listener。

你的方法

switchFunction = function() {
  myButton=document.getElementById('switchButton')
  myButton.classList.add('animationClass'); //add the class to play animation
  setTimeout(function(){myButton.classList.remove('animationClass')}, 2000);
}

.animationClass{
    animation: rotate forwards 1s;
}

@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

<button class="" id="switchButton" onclick="switchFunction()">Switch</button>

使用监听器

myButton=document.getElementById('switchButton')

myButton.addEventListener("animationend", () => myButton.classList.remove('animationClass'));

switchFunction = () => myButton.classList.add('animationClass'); //add the class to play animation

.animationClass{
    animation: rotate forwards 1s;
}

@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

<button class="" id="switchButton" onclick="switchFunction()">Switch</button>