素材牛VIP会员
如果设置css3动画为循环播放,js怎么判断动画第一次播放结束呢?
 ch***ng  分类:JavaScript  人气:901  回帖:2  发布于6年前 收藏

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

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv1 新人
霍***跑 产品经理 6年前#1

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

Lv6 码匠
长***h 产品经理 6年前#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>
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取