使用 jQuery 触发 CSS 摇动动画，每隔一段时间就有效...为什么？

Question

我这里有一个相当简单的 fiddle：http://jsfiddle.net/7aotzqmL/2/ 它应该在单击 link 时用 CSS 动画摇动 div。它有效，但仅每隔一次（每隔一次）。我很难过-有人可以帮忙吗？

我看过的其他答案提到在使用 onmouseover 时您还需要附加 onmouseout...但这只是一次点击，所以我不确定这是否相关。我只希望 div 在每次点击而不是每次点击时都摇晃。

jsFiddle: https://jsfiddle.net/7aotzqmL/2/

CSS代码：

$(function() {
  $('a').click(function(ev) {
    $('div').toggleClass('shaker');
    ev.preventDefault();
  });
});

div.shaker {
  animation: shake 0.3s;
  /* When the animation is finished, start again */
  animation-iteration-count: 1; //single shake 
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">asd</a>
<div>shake</div>

Answer 1

试试这个会有用的

$(function(){
    $('a').click(function(ev){

       $('div').addClass('shaker'); 

       setTimeout(function(){

       $('div').removeClass('shaker'); 
       },300);
        ev.preventDefault();
    });
});

下面的代码在偶数次单击时删除了 class，而您正在添加 class

的动画

$('div').toggleClass('shaker');

在上面的解决方案中，div class 将在 0.3 秒动画后被删除，它会添加 'shaker' class 每次单击时都会发生动画

Answer 2

嗯，一方面，您正在切换 class。所以一次点击意味着 "add" 下一次点击意味着 "remove"。此外，"preventdefault" 应该首先出现，以防止在您尝试添加或删除 classes 之前锚标记的默认行为。


    $(function(){
          $('a').click(function(ev){
              ev.preventDefault();
              $('div').addClass('shaker'); 
              setTimeout(()=> {
                  $('div').removeClass('shaker');
              },300)
          });
      });

Answer 3

$(function(){
$('a').click(function(ev){
  $('div').addClass('shaker'); 
   setTimeout(()=>{
   $('div').removeClass('shaker');
   },300)
    ev.preventDefault();
});
});

使用上面的代码。您正在移除 shaker class 或者。

Answer 4

您正在切换 class，所以第一次点击添加它，第二次点击删除它。相反，您可以在单击时添加 class 并设置一个单独使用的事件侦听器来侦听动画结束，然后删除 class.

$(function() {
  const div = $('.container')
  $('a').click(function(ev) {
    div.addClass('shaker')
    div.one('animationend', () => {
      div.removeClass('shaker')
    })
    ev.preventDefault();
  });

});

.container {
  opacity: 1;
  width: 100px;
  height: 100px;
  background: red;
}

.container.shaker {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.3s;
  /* When the animation is finished, start again */
  animation-iteration-count: 1; //single shake 
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#">asd</a>
<div class="container"></div>

使用 jQuery 触发 CSS 摇动动画，每隔一段时间就有效...为什么？

Using jQuery to trigger CSS shake animation, works every OTHER time ... why?

javascript

css

jquery

shake