vue结合Velocity设置动画

by shuai shen

HTML

<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.js"></script>
<div id="app">
  <button @click="toggle">show toggle</button>
  <transition @before-enter="handleBeforeEnter"
              @enter="handleEnter"
              @after-enter="handleAfterEnter"
              @before-leave="handleBeforeLeave"
              @leave="handleLeave"
              @after-leave="handleAfterLeave">
     <div v-show="show">animation</div>
  </transition>
</div>

JavaScript

new Vue({
  el: "#app",
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show;
    },
    handleBeforeEnter: function(el) {
      el.style.opacity = 0;
    },
    handleEnter: function(el, done) {
      Velocity(el, {opacity: 1,fontSize:20}, {duration: 2000, complete: done});
    },
    handleAfterEnter: function(el) {
      console.log('动画enter结束');
    },
    handleBeforeLeave: function(el) {
      el.style.opacity = 1;
    },
    handleLeave: function(el, done) {
      Velocity(el, {opacity: 0,fontSize:12}, {duration: 2000, complete: done});
    },
    handleAfterLeave: function(el) {
      console.log('动画leave结束');
    }
  }
});