<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除判帮。
v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)为鳄。在整個(gè)進(jìn)入過渡的階段中應(yīng)用裳仆，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除孤钦。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間歧斟，延遲和曲線函數(shù)。
v-enter-to：2.1.8 版及以上定義進(jìn)入過渡的結(jié)束狀態(tài)偏形。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)静袖，在過渡/動(dòng)畫完成之后移除。
v-leave：定義離開過渡的開始狀態(tài)俊扭。在離開過渡被觸發(fā)時(shí)立刻生效队橙，下一幀被移除。
v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用捐康，在離開過渡被觸發(fā)時(shí)立刻生效仇矾，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間解总，延遲和曲線函數(shù)贮匕。
v-leave-to：2.1.8 版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)花枫，在過渡/動(dòng)畫完成之后移除刻盐。
順序就是： active原->to->active enter->leave
注意：對于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 <transition>劳翰，則 v- 是這些類名的默認(rèn)前綴敦锌。如果你使用了 <transition name="my-transition">，那么 v-enter 會(huì)替換為 my-transition-enter佳簸。
