按照vue文檔使用JavaScript鉤子但是卻不能執行動畫？

大家剛入VUE肯定是先去閱讀文檔，

在 進入/離開 & 列表過渡 這一章節有一小節 ---------  JavaScript鉤子

詳情見vue文檔：  https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

 

JavaScript鉤子

可以在屬性中聲明 JavaScript 鉤子

<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>

// ...
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

當我們按照以上代碼來編寫動畫時，

發現動畫並不能執行，

其實我們只需要添加一個 `刷新動畫幀` 就好了

只是刷新動畫幀一定要設置在結束位置之前，整個動畫只需要設置一次

 

按照下圖所示的就好了，能夠正常執行動畫了