动画总结(二)_js_Velocity.js

Velocity.js是一个轻量级的js动画库，和jquery的$.animate()是具有高度相同的api，使用基本相同

• DOM部分

    /**
    * 这个位置v-bind:css="false"是必要,可以直接告诉vue,这个节点class无需解析
    * 规避不必要的class尤其是animate.css对其的影响
    * 同时还能提高解析效率
    */
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
      <span v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</span>
    </transition>
    <span v-on:click = "show = !show">点我</span>

• JS部分【基于vue;但Velocity.js也可基于react或angular的实践】

new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
	  el.style.display = 'inline-block'
      el.style.transformOrigin = 'left'
    },
    /**
    * 必须回调done 告诉vue enter已执行，可进行下一步leave 
    * 如不执行done则动画效果不会执行,整个过程持续时间为0,因为vue不知道什么时候动画结束
    * 所以必须要执行done
    */
    enter: function (el, done) {
      Velocity(el,{width:'380px'},{ duration: 600 },{ complete: done })
    },
    leave: function (el, done) {
      Velocity(el, {width:'0px',}, { duration: 600 },{ complete: done })
    }
  }
})