鉤子函式從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;
    }
  }
})