vue元素實現動畫過渡效果第一次接觸到vue動畫過渡
Vue中使用 transition標簽或transition-group標簽以及第三方類實現動畫
后來看到居然打組合拳

再然后ELEMENTUI內置過渡動畫（淡入）好吧造輪子費腦子的事情也不用考慮了

---

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。