CSS3-Animationsüberwachung und -pause

Nachdem Sie einem Element eine Animationsklasse hinzugefügt haben, verwenden Sie immer noch settimeout, um die nächste Aktion zu verzögern. Das Folgende sind definitiv anspruchsvolle Wissenspunkte.

1.Animationsüberwachung

-webkit-animation Animation hat tatsächlich drei Ereignisse:
Ereignis starten webkitAnimationStart
Ereignis beenden webkitAnimationEnd
Bewegungsereignis wiederholen 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);

2. Überwachung der Übergangsanimation

Diese Animation hat nur ein Ereignis, webkitTransitionEnd

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

ps Keiner der oben genannten hat eine kompatible Verarbeitung durchgeführt

Also wir Kann zum Erstellen kohärenter Animationseffekte nur sehr wenig Settimeout verwendet werden, aber möglicherweise müssen mehrere Animationseffekte desselben Elements verschachtelt werden. Ich habe darüber nachgedacht, warum dasselbe Element nicht direkt in einer Animation abgeschlossen werden kann. Die Situation wird im Detail analysiert

3. Animationsanimation stoppen

Wenn Sie die Animation auf unendlich einstellen, wie wird sie im aktuellen Bild gestoppt

<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>