組件的過渡
- 條件的渲染（使用v-if）
- 條件的展示（使用v-show）
- 動態組件
- 組件根節點
鏈接地址下載：
<script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>css過渡
下面是一個運用css點擊顯示隱藏顯示的2s動畫效果：
<style>
/* 離開進行中和開始進行中，設置了一個透明度的變化*/
.fade-enter-active,.fade-leave-active{
transition: opacity 2s;
}
/* 開始和結束前的時候，透明度爲0，相當於把它給隱藏掉*/
.fade-enter,.fade-leave-to{
opacity: 0;
}
</style>
<body>
<div id="main">
<button v-on:click="ok = !ok">點擊</button>
<transition name="fade">
<p v-if="ok">俠課島-vue動畫課程</p>
</transition>
</div>
</body>
<script>
var vm = new Vue({
el: '#main',
data: {
ok: true
}
});
</script>過渡理解
當使用/刪除包含在transition組件中的元素時，Vue將會做的處理：
- 首先會先嗅探一下這個目標元素是否使用CSS過渡或動畫，在使用的時候添加或者刪除CSS類名。
- 如果沒有檢測到這個CSS過渡或動畫，DOM操作（插入或刪除）會直接執行下一幀，而不會在這一幀繼續執行。
過渡動畫CSS的類名
- v-enter，定義進入過渡的開始狀態
- v-enter-active，定義過渡的狀態，在元素的整個過渡過程中作用，在元素被插入時生效，在transition/animation完成之後移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
- v-enter-to，定義進入過渡的結束狀態，在元素被插入一幀後生效（與此同時v-enter被刪除），在transition/animation完成之後移除。
- v-leave，定義離開過渡的開始狀態，在離開過渡被觸發時生效，在下一個幀移除。
- v-leave-active，定義過渡的狀態，在元素整個過渡過程中作用，在離開過渡被觸發後立即生效，在transition/animation完成之後移除，這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
- v-leave-to，定義離開過渡前的結束狀態，在離開過渡被觸發一幀後生效（與此同時v-leave被刪除），在transition/animation完成之後移除。