1. 動畫開始：@before-enter      @before-leave

    動畫過程： @enter                 @leave    在這個過程中有done方法，表示動畫結束，done方法執行時，就會觸發動畫結束函式

    動畫結束：@after-enter          @after-leave

注意：動畫變化，不是過渡。

  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
      methods: {
        handleBeforeEnter(dom) {
          dom.style.color = 'red'
        },
        handleEnter (dom, done) {
          setTimeout( () => {
            dom.style.color = 'green'
          }, 3000)
          setTimeout( () => {
            done()
          }, 6000)
        },
        handleAfterEnter (dom) {
          dom.style.color = 'black'
        }
      }
    })
  </script>
 

2. 使用第三方js動畫庫 velocit.js

在過渡過程@enter 和 @leave兩個函式中，要按第三方庫的寫法來寫（velocity.js）

  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
      methods: {
        handleBeforeEnter(dom) {
          dom.style.opacity = 0
        },
        handleEnter (dom, done) {
          Velocity(dom, {opacity: 1}, {duration: 3000, complete: done})
        },
        handleAfterEnter (dom) {
          console.log("complete animation")
        }
      }
    })
  </script>
 

結果：opacity的設定時過渡，而對color顏色的設定，不是過渡效果