vue动画使用javascript钩子函数

钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期

1. <transition
2.   v-on:before-enter="beforeEnter"
3.   v-on:enter="enter"
4.   v-on:after-enter="afterEnter"
5.   v-on:enter-cancelled="enterCancelled"
6.  
7.   v-on:before-leave="beforeLeave"
8.   v-on:leave="leave"
9.   v-on:after-leave="afterLeave"
10.   v-on:leave-cancelled="leaveCancelled"
11. >
12.   <!-- ... -->
13. </transition>

实现购物车案例

1. <input type="button" value="toggle" @click="flag=!flag"/>
2.    //使用duration来统一设置入场和离场时候动画
3.    //还可以分别设置 :duration="{enter:200,leave:400}"
4.    <transition
5.        @before-enter="beforeEnter"
6.        @:enter="enter"
7.        @:after-enter="afterEnter">
8.       <div class="ball" v-show="flag"></div>
9.    </transition>
10.  
11.  
13. var vm=new Vue({
14.   el: '#app',
15.   data:{
16.    flag:false
17.   },
18.   methods:{
19.     //el表示执行动画的那个dom元素,是个元素的dom对象
20.     //大家可以认为el是通过docoment.getElementById()获取后的dom对象
21.     beforeEnter(el){
22.         //beforeEnter表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置动画开始之前的样式
23.         el.style.transform="translate(0,0)";
24.     },
25.     enter(el,done){
26.       //动画开始之后的样式
27.       //这句话没有实际作用，但如果不写动画效果出不来
28.       //可以认为 el.offsetWidth会强制动画刷新
29.       el.offsetWidth;
30.       el.style.transform="translate(150px,450px)";
31.       el.style.transition="all in ease";
32.       //写了这个才会调用afterEnter函数，done是一个函数的引用
33.       done();
34.     },
35.     afterEnter(el){
36.       //动画完成之后调用
37.        this.flag=!this.flag;
38.     }
39.   }
40. })