如果你能够使用 transition，那么基本上也就能够使用这个事件了，只不过此事件需要加前缀的浏览器比较多（现在最新版的所有 主流浏览器，都已经不用写前缀了），大致有如下写法：
transitionend webkitTransitionEnd mozTransitionEnd oTransitionEnd
使用此属性，就可以避免上面 setTimeOut可能出现的问题了 ，使用示例如下：
// ...else {
box1.style.opacity = 0
box1.addEventListener('transitionend', function(e) {
box1.style.display = 'none'});
}需要注意的是， transitionend 事件监听的对象是所有 CSS中transition属性指定的值，例如，如果你为元素设置了 transition:all3s;的 样式，那么元素可能无论是 left top还是 opacity 的改变，都会触发该事件，也就是说此事件可能会被触发多次，并且并不一定每次都是你想要触发的，针对这种情况，最好加一个判断。既然是 涉及到了 JS实现的动画，那么其实可以考虑一下 把 setTimeout换成 requestAnimationFrame。
btn.addEventListener('click', ()=>{
let boxDisplay = box1.style.displayif(boxDisplay === 'none') {
box1.style.display='block'// setTimeOut 换成 requestAnimationFrame
requestAnimationFrame(()=> {
box1.style.opacity = 0.6})
} else {
box1.style.opacity = 0
box1.addEventListener('transitionend', function(e) {
box1.style.display = 'none'});
}
})文章最开始说过的 vue 和 react这两个框架实现示例动画的方法，也利用到了这个 API，，监听动画过渡的状态，为元素添加和删除一系列过渡类名的操作，当然，并不是全部，此事件只能监听动画结束的这个时刻，其他时间点是无法监听的。
以下为 transitionEnd 在 react-addons-css-transition-group源码里面出现的形式：
react-addons-css-transition-group对 transitionend做了兼容，如果浏览器支持此属性，则使用，如果不支持，就使用 setTimeOut这种形式。
以下为 transitionEnd 在 vue源码里面出现的形式：
另外，顺带一提的是，除了 transitionend 事件，还有一个 animationend [ https://developer.mozilla.org/en-US/docs/Web/Events/animationend ] 事件，此事件是对应 animation动画， react-addons-css-transition-group 和 vue中也都对应着 transitionend 出现了此属性的身影，这里就不展开了。
下载本文