Velocity Animation

by PlĂ­nio Naves

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button @click="show = !show">
    Alternar
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
   <div class="box" v-if="show"></div>
  </transition>
</div>

CSS

.box {
  width: 350px;
  height: 250px;
  background-color: green;
  margin: 20px;
}

JavaScript

new Vue({
	el: '#app',
  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: '120deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '200deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
});