Vue Velocity.js

by jacob hsu

HTML

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition 
    name="fade"
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>

Vue

new Vue({
  el: '#demo',
  data: {
    show: true
  },
  methods: {
  	handleBeforeEnter: function(el) {
    	//el.style.color = 'red';
      el.style.opacity = 0
    },
    handleEnter: function(el, done) {
      Velocity(el, {
      	opacity:1
      }, {
      	duration:1000,
      	complete:done
      })
/*     	setTimeout(()=>{
    	        el.style.color = 'green';
    	      },2000)
    	      setTimeout(()=>{
    	        done();
    	      },4000) */
    },
    handleAfterEnter: function(el) {
    	el.style.color = 'blue';
    }
  }
})