二、过渡事件和动画事件

2.1 过渡事件

当一个元素过渡事件的开始、经过、结束，会触发一个事件

transitionstart
transitionrun
transitionend

// 获取元素
var box = document.getElementById("box");
// 2s 之后让box加cur
setTimeout(function(){
    // box.className = "cur";
    // 也可以使用setAttribute添加类名
    box.setAttribute("class", "cur");
}, 2000);

// 过渡事件
box.addEventListener("transitionstart", function(){
    console.log("过渡开始");
});
box.addEventListener("transitionrun", function(){
    console.log("过渡中");
});
box.addEventListener("transitionend", function(){
    console.log("过渡完成");
});

#box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 0;
    top: 0;
    transition: all 2s ease 0s;
}
#box.cur {
    left: 100px;
}

2.2 动画事件

当一个动画执行的时候会触发两个事件（重复执行会再触发一个事件）

animationstart：事件在 CSS 动画开始播放时触发。
animationiteration：事件在 CSS 动画重复播放时触发。
animationend：事件在 CSS 动画结束播放时触发。

#box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 0;
    top: 0;
    /* 执行动画 */
    animation: go 1s linear 0s 5 alternate;
}
/* 添加动画事件 */
@keyframes go {
    from{
        left: 0;
    }
    to {
        left: 100px;
    }
}

// 动画开始
box.addEventListener("animationstart", function(){
    console.log("动画开始");
});
// 动画重复播放
box.addEventListener("animationiteration", function(){
    console.log("动画重复播放");
});
// 动画结束
box.addEventListener("animationend", function(){
    console.log("动画结束");
});