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

【问题标题】：How to trigger CSS3 scale (animation) with jQuery?如何使用 jQuery 触发 CSS3 缩放（动画）？
【发布时间】：2012-12-10 05:53:19
【问题描述】：

我想要实现的是动作的脉动效果（例如按钮点击）。所以我做的是这个（简化的[删除浏览器细节]）：

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

它工作正常，但只是第一次......一旦添加了“脉冲”类，它就不再触发......所以我试图做的是：

$('#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');
}

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

【问题讨论】：

如果我记得有一次我刚刚使用 jQuery 将 CSS 属性（不是类）添加到某个元素并看到过渡立即应用于它。
是错字吗？ $('#btn').click(function(e)){你有一个额外的)
是的，这是一个错字；）告诉你我在简化事情：）

标签： jquery css-transitions css-animations

【解决方案1】：

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

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

    e.preventDefault();

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

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

【讨论】：

嗯，我的逻辑是它也应该......但它不是:(必须调试一下
看着 DOM 似乎延迟并没有用 add/removeClass 完成它的工作......我想我需要做一个 setTimeout
好的，它与 setTimeout 一起工作正常，但未设置为 200。由于它脉动 2 次，因此总动画时间为 800 毫秒......带有关于更快点击的 clearTimeout 声明......整个事情实际上看起来还不错！谢谢！
好吧好吧！好吧，我不知道要编辑什么:) 我删除了我的答案？ bcoz我不知道我的回答对您有什么帮助，我无法理解您的上述评论！所以，如果它对你有帮助，我应该删除我的答案！
不要删除答案 ;)

【解决方案2】：

这是我的问题的解决方案。正如@Aspiring Aqib 指出的那样，我在添加和删除类之间需要延迟。他使用了一个 delay() jquery，但它不起作用。

这是我使用 setTimeout(); 的解决方案

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

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

【讨论】：