vue元素實(shí)現(xiàn)動(dòng)畫過渡效果第一次接觸到vue動(dòng)畫過渡
Vue中使用 transition標(biāo)簽或transition-group標(biāo)簽以及第三方類實(shí)現(xiàn)動(dòng)畫
后來看到居然打組合拳

再然后ELEMENTUI內(nèi)置過渡動(dòng)畫（淡入）好吧造輪子費(fèi)腦子的事情也不用考慮了

---

v-leave 當(dāng)前元素準(zhǔn)備從顯示轉(zhuǎn)變成隱藏，在動(dòng)畫開始前添加到元素上，動(dòng)畫一旦開始會(huì)立即刪除；
v-leave-active 在動(dòng)畫過渡過程中，元素一直擁有該樣式，直到動(dòng)畫結(jié)束則自動(dòng)刪除，用于設(shè)置過渡的效果；
v-leave-to 在動(dòng)畫過渡過程中，元素一直擁有該樣式，直到動(dòng)畫結(jié)束則自動(dòng)刪除，用于設(shè)置動(dòng)畫最終的效果；
事例中，當(dāng)點(diǎn)擊 button，div 并不會(huì)馬上 display: none， 而是首先設(shè)置 v-leave ，下一刻即刪除 v-leave ，同時(shí)添加 v-leave-active v-leave-to，當(dāng) v-leave-active 中的過渡時(shí)間執(zhí)行完成，則刪除 v-leave-active v-leave-to，同時(shí)添加 display: none。

v-enter 當(dāng)前元素準(zhǔn)備從隱藏轉(zhuǎn)變成顯示，在動(dòng)畫開始前添加到元素上，動(dòng)畫一旦開始會(huì)立即刪除；
v-enter-active 在動(dòng)畫過渡過程中，元素一直擁有該樣式，直到動(dòng)畫結(jié)束則自動(dòng)刪除，用于設(shè)置過渡的效果；
v-enter-to 在動(dòng)畫過渡過程中，元素一直擁有該樣式，直到動(dòng)畫結(jié)束則自動(dòng)刪除，用于設(shè)置動(dòng)畫最終的效果；
事例中，當(dāng)點(diǎn)擊 button，div 馬上清除 display: none， 然后設(shè)置 v-enter ，下一刻即刪除 v-enter ，同時(shí)添加 v-enter-active v-enter-to，當(dāng) v-enter-active 中的過渡時(shí)間執(zhí)行完成，則刪除 v-enter-active v-enter-to。

總結(jié)

以上是生活随笔為你收集整理的vue元素实现动画过渡效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。