記個(gè)vue過度動(dòng)畫的坑
不知道大家有沒有遇到
需求是 一個(gè)div 默認(rèn)需求是隱藏，然后在偏移的過程中顯示 到達(dá)目標(biāo)的時(shí)候再隱藏，
然后遇到了一個(gè)坑 在afterEnter中取非的時(shí)候 會導(dǎo)致全程隱藏 一致沒能理解 發(fā)現(xiàn)是結(jié)束動(dòng)畫被立馬調(diào)用了
圖片.png
解決很簡單就是在使用afterEnter的時(shí)候給他增加一個(gè)透明度
這樣子的話它取非的時(shí)候到一個(gè)偏移的過程他就會透明度變成一然后再取非
圖片.png
··
beforeEnter(el){
el.style.transform = 'translate(0, 0)'
},
enter(el, done){
el.offsetWidth
el.style.transform = 'translate(23px, 430px)'
el.style.transition = 'all 1s ease'
done()
},
afterEnter(el){
el.style.opacity = 1
this.ballFlag = !this.ballFlag
},