過渡效果

transition 是Vue 提供的封裝組件。

條件渲染（使用v-if）、條件展現（使用 v-show）、動態組件、組件根節點

當插入或刪除包含在transition 組件元素時，Vue 將會作如下處理：

1. 自動嗅探目標元素是否應用了CSS 過分或動畫，若是是，在恰當的時機添加／刪除CSS 類名。

2. 若是過分組件提供了JavaScript 鉤子函數，這些鉤子函數將恰當的時機被調用。

3. 若是沒找到JavaScript 鉤子而且也沒有監測到CSS 過渡／動畫，DOM 操做（插入／刪除）在下一幀中當即執行。

過渡的-CSS-類名

<transition name="my-transition"> //可重置前綴

 1         /*     v-enter：定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除；
 2             v-enter-active：定義過渡的狀態。元素整個過渡過程當中做用，在元素被插入時生效
 3             v-enter-to 定義進入過渡的結束狀態
 4         */
 5         .test-enter,.test-enter-active,.test-enter-to{
 6             transition:opacity 1s; background: green
 7         }
 8         /*  v-leave：定義來開過渡的開始狀態。
 9             v-leave-active：定義過渡的狀態
10             v-leave-to 定義離開過渡的狀態
11         */
12         .test-leave,.test-leave-active,.test-leave-to{
13             transition:opacity 2s; background: yellow
14         }

CSS 過渡

 1     .test-enter-active{
 2         transition: all 0.5s linear
 3     }
 4     
 5     .test-leave-active{
 6         transition: all 0.5s linear
 7     }
 8     .test-enter, .test-leave-to{
 9         transform: translateX(100px);
10         opacity: 0;
11     }

CSS 動畫

 1     .test-enter-active{
 2         animation: test-in .5s;
 3     }
 4     .test-leave-active{
 5         animation: test-in .5s reverse
 6     }
 7     @keyframes test-in{
 8         0%{
 9             transform:scale(0);
10         }
11         50%{
12             transform: scale(1.5);
13         }
14         100%{
15             transform: scale(1)
16         }
17     }

自定義過渡類名

經過自定義過渡類名，優先級高於普通類名。對於Vue 的過渡系統和其餘第三方CSS 動畫庫，如Animate.css 結合使用很是有用。

 

 

enter-class	enter-active-class	enter-to-class
leave-class	leave-active-class	leave-to-class

        <transition name="test" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">

顯性的過渡效果持續時間

<transition name="test"  :duration="{enter:500,leave:800}">

JavaScript 鉤子