jquery - 如何用 jQuery 触发 CSS3 缩放(动画)？

Question

我想要实现的是对 Action 的脉动效果(例如单击按钮)。所以我所做的是这个(简化的[删除浏览器细节]):

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