javascript - 是否可以在单击时将类(特别是其动画)重置回其初始状态

Question

我有一个动画脚本，它应该根据鼠标事件(如鼠标移动、单击等)更改 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(根据要求): that fiddle

Answer 1

您需要在删除类和重新添加类之间使用超时，否则类不存在的时间量太小，浏览器无法注意到差异。

下面是我的意思的一个例子。您将能够看到，每次单击该元素时，它都会返回到其原始状态并且动画会重新开始。

window.onload = function() {
  var el = document.querySelector('div');
  el.addEventListener('click', function() {
    if (this.className == '') { /* for the first click, add class immediately */
      this.className = 'animated';
    } else { /* for second and subequent clicks, first remove class and add after timeout */
      this.className = '';
      window.setTimeout(function() {
        el.className = 'animated';
      }, 100);
    }
  });
}

div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.animated {
  animation: zoom 2s linear alternate infinite;
}
@keyframes zoom {
  to {
    transform: scale(1.25);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Moving Div!</div>

---

注意:上面片段中使用的动画只是一个示例。我在看到你的 fiddle 之前创建了它。 Sammy has kindly contributed a fiddle以适应有问题的动画。见 fiddle here .