transition組件
toggle切換隱藏和顯示
css過渡
漸入 ? ?v-enter ? ?v-enter-active
漸出 ? ? v-leave ? ?v-leave-active
transition中只有name屬性梅割,不可添加其他標簽屬性
transition中只能有一個子元素并且該子元素需要有v-show或者v-if來控制是否顯示
過渡CSS類名
v-enter:定義進入過渡的開始狀態(tài)。在元素被插入時生效备典,在下一個幀移除。
v-enter-active:定義進入過渡的結束狀態(tài)立润。在元素被插入時生效扮碧,在transition/animation完成之后移除。
v-leave:定義離開過渡的開始狀態(tài)慨默。在離開過渡被觸發(fā)時生效,在下一個幀移除弧腥。
v-leave-active:定義離開過渡的結束狀態(tài)厦取。在離開過渡被觸發(fā)時生效,在transition/animation完成之后移除管搪。
三種方式過渡
1.v-show
2虾攻、v-if和v-else
3、:is動態(tài)改變組件的方法
js過渡
v-on:before-enter(v-on:befroe-leave) ? ?進入(出去)的狀態(tài)更鲁,設置初始狀態(tài)
v-on:enter (v-on:leave) ? ? ? 漸入(漸出)的過程中霎箍,設置中間狀態(tài)
v-on:after-enter(v-on:after-leave) ? ? 進入(出去)后的狀態(tài)
v-on:enter-cancelled(v-on:leave-cancelled) 當停止后頁面的狀態(tài)