Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡

條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態組件
組件根節點

<style> .fade-enter-active, .fade-leave-active {transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0; } </style> <div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition> </div><script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script><script>new Vue({el: '#demo',data: {show: true}}) </script>

過渡的類名
在進入/離開的過渡中，會有 6 個 class 切換。

v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。

v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。

v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 ，則 v- 是這些類名的默認前綴，如v-enter。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter。

總結

以上是生活随笔為你收集整理的单元素/组件的过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

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