js监听transition过渡事件

html

        <div id="mydiv">
            
        </div>

style

    #mydiv{
        width:100px;
        height:100px;
        background:red;
        -webkit-transition: width 2s ease-in-out;
        transition: width 2s ease-in-out;
    }
    #mydiv:hover{
        width:400px;
    }

js

        document.getElementById("mydiv").addEventListener("transitionend",function(e){
            this.innerHTML="过渡事件触发--过渡以完成"
        })

上面的例子，当鼠标覆盖div时，触发transition过渡效果，将宽度变为400px。

然后js监听了div的过渡效果的结束事件，当过渡效果结束时，往当前元素（div）添加文本内容。

当然，还可以监听，过渡事件的开始，进行，结束事件，分别为transitionstart、transitionrun、transitionend。