Javascript 是否可以在单击时将类（特别是其动画）重置回其初始状态

我有一个动画脚本，可以根据鼠标事件（如mousemove、click等）更改

div

的动画。一个问题是，动画应该在每次单击

div

时启动

在Chrome中，唯一可用于测试的浏览器*（请阅读底部的注释），这不起作用：

//The non-clicked class is "notClicked"
//The clicked class is "clicked"
//The will be referred to as elem
elem.onclick = function(){
  elem.className="notClicked";
  elem.className="clicked";
} 

单击一次项目时，它会按预期工作，但如果单击两次（触发两个事件），则会发生以下情况：

• 在元素检查器中，该类显示一个更改
• 但是，动画将继续，就好像类从未更改，第二个事件从未触发一样

注意：不幸的是，我只有一个chromebook，我不能在其他浏览器上进行测试，因为我只有chrome。我知道我很便宜。对不起

附加说明：首选本机javascript，但jQuery解决方案也不错

更多说明：为了清晰起见，我想我已经把很多人弄糊涂了，当第二次单击对象时，动画应该重新开始，而不是继续

---

JS FIDDLE（按要求）：

下面是一个如何避开第二次点击的示例。 在第一次单击中，它会生成一个

e.preventDefault（）子在第二次单击中，您可以检查它是否已被
if（e.isDefaultPrevented（））{
剪辑，以便可以转义2。单击

$add_table_form.on('submit', function (e) {
      if (e.isDefaultPrevented()) {

      } else {
        e.preventDefault();
        save_table();
      }
    });

您需要在移除类和重新添加类之间使用一个超时，因为否则类缺席的时间太少，浏览器无法注意到差异

下面是我的意思的一个例子。你可以看到，每次单击元素时，它都会回到原始状态，动画会重新启动


window.onload=function（）{
var el=document.querySelector（'div'）；
el.addEventListener（'click'，函数（）{
如果第一次单击（this.className=''）{/*则立即添加类*/
this.className='animated'；
}else{/*对于第二次和后续的单击，首先删除类，然后在超时后添加*/
this.className=''；
setTimeout（函数（）{
el.className='animated'；
}, 100);
}
});
}
div{
高度：200px；
宽度：200px；
边框：1px实心；
}
.动画{
动画：缩放2s线性交替无限；
}
@关键帧缩放{
到{
转换：比例（1.25）；
}
}

移动Div！
在同一个函数中，您要更改两次类名？元素不会总是单击类
，因为第二个会覆盖第一个吗？您甚至没有附加。@Harry，您误解了。动画会在第二个事件触发后继续，好像第二个事件从未触发一样参见：Nice one@S如果你不介意的话，我可以把你的评论链接到我的答案上吗？我的答案中当前的动画只是一个示例，与OP的小提琴中提供的动画不同。我正要自己添加它