如何实现元素显隐切换的过渡效果

如果你能够使用 transition，那么基本上也就能够使用这个事件了，只不过此事件需要加前缀的浏览器比较多（现在最新版的所有 主流浏览器，都已经不用写前缀了），大致有如下写法：

transitionend
webkitTransitionEnd
mozTransitionEnd
oTransitionEnd

使用此属性，就可以避免上面 setTimeOut可能出现的问题了 ，使用示例如下：

// ...else {
 box1.style.opacity = 0
 box1.addEventListener('transitionend', function(e) {
 box1.style.display = 'none'});
}

既然是 涉及到了 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，，监听动画过渡的状态，为元素添加和删除一系列过渡类名的操作，当然，并不是全部，此事件只能监听动画结束的这个时刻，其他时间点是无法监听的。

react-addons-css-transition-group对 transitionend做了兼容，如果浏览器支持此属性，则使用，如果不支持，就使用 setTimeOut这种形式。

另外，顺带一提的是，除了 transitionend 事件，还有一个 animationend [ https://developer.mozilla.org/en-US/docs/Web/Events/animationend ] 事件，此事件是对应 animation动画， react-addons-css-transition-group 和 vue中也都对应着 transitionend 出现了此属性的身影，这里就不展开了。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com