钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期
-
<transition
-
v-on:before-enter="beforeEnter"
-
v-on:enter="enter"
-
v-on:after-enter="afterEnter"
-
v-on:enter-cancelled="enterCancelled"
-
-
v-on:before-leave="beforeLeave"
-
v-on:leave="leave"
-
v-on:after-leave="afterLeave"
-
v-on:leave-cancelled="leaveCancelled"
-
>
-
<!-- ... -->
-
</transition>
实现购物车案例
-
<input type="button" value="toggle" @click="flag=!flag"/>
-
//使用duration来统一设置入场和离场时候动画
-
//还可以分别设置 :duration="{enter:200,leave:400}"
-
<transition
-
@before-enter="beforeEnter"
-
@:enter="enter"
-
@:after-enter="afterEnter">
-
<div class="ball" v-show="flag"></div>
-
</transition>
-
-
-
var vm=new Vue({
-
el: '#app',
-
data:{
-
flag:false
-
},
-
methods:{
-
//el表示执行动画的那个dom元素,是个元素的dom对象
-
//大家可以认为el是通过docoment.getElementById()获取后的dom对象
-
beforeEnter(el){
-
//beforeEnter表示动画入场之前,此时动画尚未开始,可以在beforeEnter中设置动画开始之前的样式
-
el.style.transform="translate(0,0)";
-
},
-
enter(el,done){
-
//动画开始之后的样式
-
//这句话没有实际作用,但如果不写动画效果出不来
-
//可以认为 el.offsetWidth会强制动画刷新
-
el.offsetWidth;
-
el.style.transform="translate(150px,450px)";
-
el.style.transition="all in ease";
-
//写了这个才会调用afterEnter函数,done是一个函数的引用
-
done();
-
},
-
afterEnter(el){
-
//动画完成之后调用
-
this.flag=!this.flag;
-
}
-
}
-
})