用jquery控制css animation 播放

思路:当然,首先想到的一定是 animation-play-state 这个属性有paused和running 两个值,那么利用这个东西,应该就能实现功能。

找原因:

  1. 这时候注意到 animation-iteration-count这个属性,规定的是动画播放次数,默认为1。所以动画只能播放一次,而且这次动画播放完毕后,它的animation-play-state 并不会变为paused,还是running。

所以我这边解决这个问题的思路是

  1. animation-iteration-count这个属性就不能用默认值1,因为动画要重复播放,值用 infinite (无限循环)
  2. 根据animation动画的时间,设置定时器,即一次动画播放完毕,则在定时器内执行动画animation-play-state 变为paused 。
  3. 为了防止在播放过程中按钮多次点击,定时器被多次执行==》 每次点击按钮后就把按钮隐藏,动画播放完毕后再把按钮显示
$('.how-drap-btn').click(function(){
   var self = this;
   // 按钮隐藏,防止重复触发延时定时器
   $(this).hide();
   $('.petal').css('-webkit-animation-play-state','running')
   $('.petal').css('animation-play-state','running')
   setTimeout(function(){
      $('.petal').css('-webkit-animation-play-state','paused')
      $('.petal').css('animation-play-state','paused')
      $(self).show();
   },10000);
});