如果设置css3动画为循环播放,js怎么判断动画第一次播放结束呢?

如果设置css3动画为循环播放,js怎么判断动画第一次播放结束呢?

阅读 2.6k
2 个回答

在js中监听结束事件,如果要想监听第一遍执行完成可以设置一个变量标识来判断
例子

<style>
#test{width:100px; height:100px; background:#999;}
.scale{animation:scale 8s linear 0s infinite;}
@keyframes scale{
     0%,100% {transform:scale(1.0)}
     50% {transform:scale(1.2)}
     20%,80% {transform:scale(1.1)}
}
</style>
<div id="test" class="scale"></div>

<script>
    var isFirst = true;
    var test = document.getElementById('test');
    //动画开始
    test.addEventListener("webkitAnimationStart", function(){
        console.log('动画开始'); 
    }, false); 
    //监听动画循环
    //第一遍动作完成时
    test.addEventListener("webkitAnimationIteration", function(){
        if(isFirst){
            console.log('一遍完成');
            isFirst = false;
        }
    }, false); 
</script>

你可以只写一次动画,用js来实现循环,这样就可以判断了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题