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

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

---

v-leave 當(dāng)前元素準(zhǔn)備從顯示轉(zhuǎn)變成隱藏，在動(dòng)畫(huà)開(kāi)始前添加到元素上，動(dòng)畫(huà)一旦開(kāi)始會(huì)立即刪除；
v-leave-active 在動(dòng)畫(huà)過(guò)渡過(guò)程中，元素一直擁有該樣式，直到動(dòng)畫(huà)結(jié)束則自動(dòng)刪除，用于設(shè)置過(guò)渡的效果；
v-leave-to 在動(dòng)畫(huà)過(guò)渡過(guò)程中，元素一直擁有該樣式，直到動(dòng)畫(huà)結(jié)束則自動(dòng)刪除，用于設(shè)置動(dòng)畫(huà)最終的效果；
事例中，當(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 中的過(guò)渡時(shí)間執(zhí)行完成，則刪除 v-leave-active v-leave-to，同時(shí)添加 display: none。

v-enter 當(dāng)前元素準(zhǔn)備從隱藏轉(zhuǎn)變成顯示，在動(dòng)畫(huà)開(kāi)始前添加到元素上，動(dòng)畫(huà)一旦開(kāi)始會(huì)立即刪除；
v-enter-active 在動(dòng)畫(huà)過(guò)渡過(guò)程中，元素一直擁有該樣式，直到動(dòng)畫(huà)結(jié)束則自動(dòng)刪除，用于設(shè)置過(guò)渡的效果；
v-enter-to 在動(dòng)畫(huà)過(guò)渡過(guò)程中，元素一直擁有該樣式，直到動(dòng)畫(huà)結(jié)束則自動(dòng)刪除，用于設(shè)置動(dòng)畫(huà)最終的效果；
事例中，當(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 中的過(guò)渡時(shí)間執(zhí)行完成，則刪除 v-enter-active v-enter-to。

總結(jié)

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

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