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

Why does keyframes animation on click only trigger once?

本文关键字：一次 单击 关键帧 动画 为什么      更新时间：2023-09-26

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

解决了，请参阅下面的答案

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

这非常相关，但我访问了两个参考链接，但找不到有效的解决方案：多次单击时运行关键帧动画

任何帮助将不胜感激。

谢谢。托马斯。

我找到了一个解决方案：

我添加了一个侦听器，最后给元素一个新的/重置动画

简讯 

$(".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);
  }
}

像这样使用 .on（） 或 .live（）

$(".audioplayer-playpause").on('click',function(){});

或者像这样

 $(document).on('click',".audioplayer-playpause",function(){});

所以你的代码将是 

$(document).ready(function(){
    $(".audioplayer-playpause").on('click',function(){
       $(this).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",
       });
   });
});
相关文章：