vue transition 中Velocity的參數的觀點

Vue transition 過渡動畫使用鉤子函數

鉤子函數

• 將鉤子函數綁定在transition標籤上以後

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

• 在Vue實例中的methods定義鉤子函數的方法

• 在這裏踩到了一個坑

  after-enter函數一直沒有觸發，花了好久時間才獲得解決，這裏用了Vue官方推薦的插件Velocity.js,如今就讓咱們聊聊這個問題

原來有問題的代碼

enter(el, done){
        Velocity(el, { translateX: '150px',translateY : '450px' }, { duration: 1000 })
        Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })
        // setTimeout(() => {
        //     el.offsetWidth
        //     el.style.transform = "translate(150px,450px)";
        //     el.style.transition = "all 2s easy";
        //     done()
        // }, 20)
        
    },

上面代碼的動畫效果沒有問題，可是after-enter方法卻一直沒有觸發後面經過調試後發現

Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })

改成

Velocity(el,{opacity: 1}， { complete: done })

或者

elocity(el,{opacity: 1},{ duration: 1000 , complete: done })

after-enter方法就觸發了，那麼對比官方給的例子

<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>
new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

分析

作出其餘嘗試後，發現只要傳了4個參數後，個人after-enter方法就不會觸發，因此我的以爲在Vue translition中Velocity(...args）只能傳三個參數，在結合Velocity()的Arguments的參數（源於https://www.cnblogs.com/guand...）

{
    width: "500px",        // 動畫屬性 寬度到 "500px" 的動畫
    property2: value2      // 屬性示例
}, {
    /* Velocity 動畫配置項的默認值 */
    duration: 400,         // 動畫執行時間
    easing: "swing",       // 緩動效果
    queue: "",             // 隊列
    begin: undefined,      // 動畫開始時的回調函數
    progress: undefined,   // 動畫執行中的回調函數（該函數會隨着動畫執行被不斷觸發）
    complete: undefined,   // 動畫結束時的回調函數
    display: undefined,    // 動畫結束時設置元素的 css display 屬性
    visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
    loop: false,           // 循環
    delay: false,          // 延遲
    mobileHA: true         // 移動端硬件加速（默認開啓）
}

結論

在Vue的鉤子函數中Velocity()的第一個參數是el，第二個爲動畫屬性項的定義，第三個參數爲動畫配置項的定義，Velocity的用法即：

Velocity(el,obj1,obj2)

obj1,obj2的屬性請看上面的參數

end