VUE——動畫效果

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

html中寫入

show在定義事件中給處置 true  or false

在css樣式中寫入。

介紹下css中内容

<code>v-enter</code>：定義進入過渡的開始狀态。在元素被插入之前生效，在元素被插入之後的下一幀移除。

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

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

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

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

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

 對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <code>&lt;transition&gt;</code>，則 <code>v-</code> 是這些類名的預設字首。如果你使用了 <code>&lt;transition name="my-transition"&gt;</code>，那麼 <code>v-enter</code> 會替換為 <code>my-transition-enter</code>

自己寫動畫有點麻煩，可以引入第三方庫。

在index.html中引入第三方的庫。樣式可以選擇animate.css

然後在html種寫入

這樣就簡單的實作了動畫效果。