javascript - 为什么单击时的关键帧动画只触发一次？

Question

下面是我的代码，关键帧动画只在第一次点击时发生。有什么想法吗？

解决了，看下面我的回答

JQUERY:

$(".audioplayer-playpause").click(function(){
  $('.audioplayer-playpause').css({

    //for firefox
    "-moz-animation-name":"playPausePulse",
    "-moz-animation-duration":"0.1s",
    "-moz-animation-iteration-count":"1",
    "-moz-animation-fill-mode":"forwards",

    //for safari & chrome
    "-webkit-animation-name":"playPausePulse",
    "-webkit-animation-duration":"0.1s",
    "-webkit-animation-iteration-count":"1",
    "-webkit-animation-fill-mode":"forwards",

  });
});

CSS:

@-moz-keyframes playPausePulse /*--for webkit--*/{
    0%   {background-color: rgba(0, 0, 0, 0.05);}
    50%   {background-color: rgba(0, 0, 0, 0.1);}
    100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-webkit-keyframes playPausePulse /*--for webkit--*/{
    0%   {background-color: rgba(0, 0, 0, 0.05);}
    50%   {background-color: rgba(0, 0, 0, 0.1);}
    100%   {background-color: rgba(0, 0, 0, 0.05);}
}

这非常相关，但我访问了两个引用链接，但找不到有效的解决方案: run keyframes-animation on click more than once

如有任何帮助，我们将不胜感激。

谢谢。 托马斯。

Answer 1

我找到了一个解决方案:

我添加了一个监听器以在末尾为元素提供新的/重置动画

JQUERY

$(".audioplayer-playpause").click(function(){
  $('.audioplayer-playpause').css({

  //for firefox
  "-moz-animation-name":"playPausePulse",
  "-moz-animation-duration":"0.1s",
  "-moz-animation-iteration-count":"1",
  "-moz-animation-fill-mode":"forwards",

  //for safari & chrome
  "-webkit-animation-name":"playPausePulse",
  "-webkit-animation-duration":"0.1s",
  "-webkit-animation-iteration-count":"1",
  "-webkit-animation-fill-mode":"forwards",

  });
});

   $(".audioplayer-playpause").bind('oanimationend animationend webkitAnimationEnd', function() { 
        $(".audioplayer-playpause").css({
            '-moz-animation-name': 'playPausePulseReset',
            '-webkit-animation-name': 'playPausePulseReset',
        });
   });

CSS

@-moz-keyframes playPausePulse /*--for webkit--*/{
  0%   {background-color: rgba(0, 0, 0, 0.05);}
  50%   {background-color: rgba(0, 0, 0, 0.1);}
  100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-webkit-keyframes playPausePulse /*--for webkit--*/{
  0%   {background-color: rgba(0, 0, 0, 0.05);}
  50%   {background-color: rgba(0, 0, 0, 0.1);}
  100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-moz-keyframes playPausePulseReset /*--for webkit--*/{
  0%, 100% {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

@-webkit-keyframes playPausePulseReset /*--for webkit--*/{
  0%, 100% {
    background-color: rgba(0, 0, 0, 0.05);
  }
}