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。
原文：https://www.cnblogs.com/fqh123/p/10896627.html