transition標籤過渡動畫的原理:
當一個元素被transition包裹了之後，Vue會自動分析元素的css樣式,然後構建一個動畫的流程.
上圖的線加上幾個點就是動畫從的流程，在動畫即將被執行的這一瞬間，他會往內部的div上增加兩個class,分別是fade-enter和fade-enter-active,當動畫第一幀執行結束之後，Vue會在動畫執行到第二幀的時候，fade-enter這個class會被去掉，然後增加一個名爲fade-enter-to的class,接着動畫會繼續執行，執行到結束的這一瞬間，Vue會把fade-enter-actice和fade-enter-to兩個class去除掉。
CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。要實現這一點，必須規定兩項內容：
- 指定要添加效果的CSS屬性
- 指定效果的持續時間。
<style>
/*因爲我們給transition起的名字是fade，所以calss的前綴是fade,
如果不給transition起名字,默認的前綴是v,例如v-enter*/
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
上面這段代碼實現了一個漸變出現Hello World的效果，因爲fade-enter在第二幀的時候就被去掉了，元素的opacity變回1，而transition監聽了opacity屬性，就實現了一秒透明度從0到1的效果。
上面是動畫從隱藏到顯示的一個流程，而顯示到隱藏的流程與它類似：
以上是Vue中的transition過渡的動畫原理。
實際上，Vue裏面的CSS動畫是通過在某一時刻自動往一些標籤上增加一些樣式來實現的。