css3 animation monitoring and pausing-CSS Tutorial-php.cn

css3 animation monitoring and pausing

高洛峰

Release： 2016-11-22 10:24:32

Original

1118 people have browsed it

After adding an animation class to an element, you are still using settimeout to delay the next action. You are out. The following are definitely pretentious knowledge points.

1.animation animation monitoring

-webkit-animation animation actually has three events:
Start event webkitAnimationStart
End event webkitAnimationEnd
Repeat motion event webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成输出end
}, false);

Copy after login

2.Transition animation monitoring

This animation only has one event webkitTransitionEnd

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

Copy after login

ps None of the above are compatible

so that we can use very few settimeouts to create coherent animation effects, but multiple animation effects of the same element may need to be nested. After thinking about it, if the same element Why not just complete it in one animation? This may need to be analyzed in detail

3. Animation animation stop

When you set the animation to infinite, how do you stop it in the current picture

<style type="text/css">
.love {
    display: block;
    width: 100px; height: 100px;
    background: url(http://www.zhangxinxu.com/study/201512/web_heart_animation.png) 0 0 no-repeat;
    background-size: 2900%;
    animation: heart-burst steps(28) 0.8s infinite both;
}//图片背景的动画    
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
</style>

<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>

<script type="text/javascript">
    var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    
    if (image.classList && image && button) {
        button.onclick = function() {
            if (this.value == &#39;暂停&#39;) {
                image.classList.add(&#39;stop&#39;);
                this.value = &#39;播放&#39;;
            } else {
                image.classList.remove(&#39;stop&#39;);
                this.value = &#39;暂停&#39;;
            }
        };
    }    
</script>

Copy after login