Animation API

API

animation涉及到的事件有animationstart、animationend、animationiteration三个。这三个事件的bubbles都是yes，cancelable都是no

[注意] 对于safari浏览器，animation的事件为webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration

[注意] 动画事件只支持DOM2级事件处理程序的写法

animationstart    发生在动画开始时

【1】如果存在delay，且delay为正值，则元素等待延迟完毕后，再触发该事件

【2】如果delay为负值，则元素先将初始值变为delay的绝对值时，再触发该事件

    oSb.addEventListener('animationstart',function(){
        this.innerHTML = '动画开始';
        this.style.background = 'lightgreen';
    },false);

animationend    发生在动画结束时

test.addEventListener('animationend',function(){
    this.style.background="lightgreen";
    this.innerHTML = '动画结束';
},false);

animationiteration    发生在动画的一次循环结束时，只有当iteration-count循环次数大于1时，触发该事件

var i = 0;
oSb.addEventListener('animationiteration',function(){
    i++;
    this.innerHTML = i;
},false);

【补充】    只有改变animation-name时，才会使animation动画效果重新触发

oSb.style.animationName = 'none';
setTimeout(function(){
    oSb.style.animationName = 'test';
},100);

属性

这三个事件的事件对象，都有animationName和elapsedTime属性这两个私有属性

animationName属性:返回产生过渡效果的CSS属性名
elapsedTime属性:动画已经运行的秒数

[注意] 对于animationstart事件，elapsedTime属性等于0，除非animation-delay属性等于负值

<style>
#test{height:100px;width:300px;background-color:lightblue;animation:anim 2s 3;}
@keyframes anim{
    0%{height: 100px;}
    50%{height: 50px;}
    100%{height: 0;}
}
</style>

<button id='reset'>还原</button>
<div id="test"></div>
<script>
reset.onclick = function(){
    history.go();
}
test.addEventListener("animationstart", listener, false);
test.addEventListener("animationend", listener, false);
test.addEventListener("animationiteration", listener, false);
function listener(e){
    e = e || event;
    var li = document.createElement("li");
    switch(e.type) {
    case "animationstart":
      li.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      li.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      li.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
    }
    test.appendChild(li);
}
</script>