如何使用jQuery触发CSS3缩放（动画）？

Question

我想要实现的是对动作的脉动效果（例如，单击按钮）。 因此，我所做的就是这个（简化的[已删除的浏览器详细信息]）：

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.02);}
  100% {transform: scale(1);}
}

.pulsate{
  animation-name: pulse 0.2s linear 2;
}

在jQuery中，我这样做是：

$('#btn').click(function(e)){
    e.preventDefault();
    $('#some_element').addClass('pulse');
}

它可以正常工作，但是只是第一次。一旦添加了“ pulse”类，它就不会再触发了……所以我想做的是：

$('#btn').click(function(e)){
    e.preventDefault();
    $('#some_element').removeClass('pulsate').addClass('pulsate');
}

而且仍然无法正常工作...与此相反：

$('#btn').click(function(e){
    e.preventDefault();     
    $('#some_element').toggleClass('pulsate');
}

第一次起作用，而不是第二次，但是第三次​​又起作用。 所以基本上每隔一次

我感到困惑。 为什么它会以这种方式工作，而不是再次删除并添加它？ 我什至尝试制作一个重置类（再次简化）：

.reset_transform(){
    transform: none;
}

在jQuery中，我正在执行以下操作：

$('#btn').click(function(e)){
  e.preventDefault();
  $('#some_element').removeClass('pulsate').addClass('reset_transform').addClass('pulsate');
}

但是您可以想象，它不起作用...有什么想法吗？ 我希望元素每次单击按钮时都会跳动。

Answer 1

这是我的问题的解决方案。 正如@Aspiring Aqib指出的那样，在添加和删除类之间需要延迟。 他使用了delay（）jQuery，但无法正常工作。

这是我使用setTimeout（）的解决方案；

$('#some_element').addClass('pulsate');

setTimeout(function(){
   $('#some_element').removeClass('pulsate');
}, 800);

Answer 2

ToggleClass()无效，因为当您第一次单击它时，它添加了类并播放了动画。 当您第二次单击该类时，该类将被删除，因此，该类也将被删除，这就是为什么它不播放动画的原因。 第三次，它像第一次一样工作，该过程将继续：/

$('#btn').click(function(e)){

    e.preventDefault();

    $('#some_element').addClass('pulse').delay(200).removeClass('pulse');
}

好吧，我不认为上面的代码会起作用！ :)