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

Answer 2

像这样使用.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",

       });
   });
});

为什么点击关键帧动画只触发一次？

2 个答案: