VUE動(dòng)畫
1.vue不能直接實(shí)現(xiàn)動(dòng)畫,它提供動(dòng)畫各階段需要的class;
2.<transition>或者<transition-group>組件提供class哪亿;
3.在vue中粥烁,動(dòng)畫是在元素顯示與隱藏的過(guò)程中,添加class實(shí)現(xiàn)的(v-if v-else
v-show)蝇棉;
4.transition組件提供:
v-enter-active元素整個(gè)進(jìn)入的過(guò)程
①v-enter元素進(jìn)入的初始狀態(tài)讨阻;
②v-enter-to元素進(jìn)入的結(jié)束狀態(tài);
v-leave-active元素整個(gè)離開的過(guò)程
①v-leave元素的離開初始狀態(tài)篡殷;
②v-leave-to元素的離開結(jié)束狀態(tài)钝吮;
自定義動(dòng)畫名:
enter-active-class="xxx";
leave-active-class="xxx";
要引入第三方css,animate.css
動(dòng)畫模式mode:
in-out先執(zhí)行進(jìn)入動(dòng)畫板辽,再執(zhí)行離開動(dòng)畫奇瘦;
out-in先執(zhí)行離開動(dòng)畫,再執(zhí)行進(jìn)入動(dòng)畫劲弦;
transition-group組件:
tag指定標(biāo)簽耳标;
move-class給正在移動(dòng)的元素添加類;
name動(dòng)畫名稱;
enter-active-class="xxx";
leave-active-class="xxx";