如何使用JavaScript在单击中删除和添加css动画属性

我对用JavaScript触发css动画有一个问题。 这是我的代码片段：

const signInBtn=document.querySelector（“#signin btn”）；
函数btnAnimation（）{
if（符号样式动画）{
signInBtn.style.animation=''；
}否则{
signInBtn.style.animation='btnAnimation 200ms线性'；
}
}
signInBtn.addEventListener（'click'，btnAnimation）
正文{
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
框大小：边框框；
}
.包装纸{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
钮扣{
边框：2件纯黑；
边界半径：25px；
宽度：100px；
高度：40px；
}
按钮：焦点{
大纲：无；
}
.wrapper.签名{
宽度：200px；
高度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
@关键帧btnAnimation{
0% {
变换：比例（1）；
}
50% {
变换：比例（.8）；
}
100% {
变换：比例（1）；
}
}

文件
登录
问题在于，一旦应用了CSS样式，它就会运行动画一次，仅此而已。因此，要在后续操作中再次触发动画，需要重置按钮的CSS。在这里，我使用
setTimeout
在220ms后重置样式，这使得css动画在重置按钮样式之前有足够的时间完成

要以多个按钮为目标，可以在元素之间使用公共类。我选择了
btn动画。
继续你的代码风格，我使用
document.querySelectorAll
按类名获取所有元素

ES5


var nodes=document.querySelectorAll（'.btn animation'）；
对于（var i=0；i

正文{
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
框大小：边框框；
}
.包装纸{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
钮扣{
边框：2件纯黑；
边界半径：25px；
宽度：100px；
高度：40px；
}
按钮：焦点{
大纲：无；
}
.wrapper.签名{
宽度：200px；
高度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
@关键帧btnAnimation{
0% {
变换：比例（1）；
}
50% {
变换：比例（.8）；
}
100% {
变换：比例（1）；
}
}

文件
登录
选择1
选择2
选择3
选择4
备选案文5
使用超时重置：它工作正常。非常感谢。我还有一个问题。如果我有多个按钮，我希望他们都有这个动画点击。我是否必须为每个按钮创建一个函数，或者我可以将其封装在单个函数中，然后为每个按钮调用事件侦听器？@stepdev我更新了答案，以便使用类名将元素作为目标来添加事件侦听器。是的，它工作得非常好。我对每个按钮都有多个功能的效果是一样的，这并不是一个很大的问题，因为在我的例子中，我只有两个。但是，对于倍数，这并不实际。我突然想到我可以用loop来做，但我真的不知道怎么做，还在学习：D。所以基本上，一组具有相同类的按钮类似于数组元素，u使用“for loop”循环该数组，并使用[i]和target属性将其作为目标，对吗？。非常感谢这真的帮助我了解了很多事情。顺致敬意，