Question

我有一个动画脚本，可以根据鼠标事件（如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（根据要求）： that fiddle

Answer 1

你需要在删除类和重新添加之间使用超时，因为否则缺少类的时间对于浏览器来说太微不足道了。

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

＆＃13;

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);
    }
  });
}

＆＃13;

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

＆＃13;

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

＆＃13;

注意：上述代码段中使用的动画仅供参考。我在看到你的小提琴之前创造了它。 Sammy has kindly contributed a fiddle以适应相关的动画。请参阅小提琴here。

Answer 2

这是一个如何逃脱第二次点击的示例。在第一次单击时，它会在第二次点击时生成一个e.preventDefault();儿子，您可以检查if (e.isDefaultPrevented()) {是否已被$add_table_form.on('submit', function (e) { if (e.isDefaultPrevented()) { } else { e.preventDefault(); save_table(); } });阻止，以便您可以逃脱2.单击

Options +FollowSymlinks
RewriteEngine On

# coments on htaccess with # caracter

RewriteRule ^\/user\/(\w)*$ /user.php?un=$1 [NC]

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

2 个答案: