2

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

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

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

4

2 回答 2

4

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

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

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

setTimeout(function(){
   $('#some_element').removeClass('pulsate');
}, 800);
于 2012-12-23T13:00:50.853 回答
1

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

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

    e.preventDefault();

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

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

于 2012-12-23T11:50:03.993 回答