vue动画使用javascript钩子函数

钩子函数从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;
    }
  }
})