如何實現元素顯隱切換的過渡效果

如果你能夠使用 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