組件的過度
Vue1.0中transition做為標簽的行內(nèi)屬性被vue支持。但在Vue2.0中。Vue放棄了舊屬性的支持并提供了transition組件，transition做為標簽被使用。
使用transition完成任何元素進入/離開的過渡組件需要滿足下列條件
- 條件渲染（v-if）
- 條件展示（v-show）
- 動態(tài)組件
- 組件根節(jié)點
Elample
html
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
js
new Vue({
el: '#demo',
data: {
show: true
}
})
css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
-
<transition>中只有name屬性，不可添加其他標簽屬性 -
<transition>中只能有一個子元素并且該子元素需要有v-show或者v-if來控制是否顯示
過渡CSS類名
<transition>中的name屬性用于 替換 vue鉤子函數(shù)中的類名v-
-
v-enter:定義進入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。 -
v-enter-active:定義進入過渡的結束狀態(tài)。在元素被插入時生效，在transition/animation完成之后移除。
-
v-leave:定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。 -
v-leave-active:定義離開過渡的結束狀態(tài)。在離開過渡被觸發(fā)時生效，在transition/animation完成之后移除。
