vuejs velocityjs transition

index.html

<template id='image'>
  <img ref="imgs" alt=""/>
</template>

<div id="app">
  <transition  mode="out-in"
              v-on:before-enter="beforeEnter"
              v-on:enter="enter"
              v-on:leave="leave"
              >
    <div ref="container" class="container" :key="show">
      <div key="box" v-if="show" ref="box">
        <imgs  ref="imgs" src="http://via.placeholder.com/350x150" alt=""> </imgs>
        
        <div class="inner">
          <div @click="show =  false" class="btn">Show Modal</div>
        </div>
      </div>
      <div key="pop" ref="pop" v-else>
        <div @click="show = true" class="close">&times;</div>
        <imgs src="http://via.placeholder.com/350x150" alt=""></imgs>
      </div>
    </div>
  </transition>
</div>

script.js

Vue.component("imgs", {
  template: "#image",
  mounted(){
    //pre-register transition
    Velocity(this.$refs.imgs, 'transition.slideUpIn', {duration: 1500} )
  }
});
new Vue({
  el: '#app',
  data(){
    return{
      show: true
    }
  },
  mounted(){
    var vm = this
    Velocity.RegisterUI('mqs.slideUpIn', {
      defaultDuration: 500,
      calls: [
        [{opacity: [1, 0], translateY: [0, 100]}]
        ]
    })
    Velocity.RegisterUI('mqs.slideDownOut', {
      defaultDuration: 300,
      calls: [
        [{opacity: [0, 1], translateY: [100, 0]}]
        ]
    })
  },
  methods:{
    beforeEnter: function (el) {
      el.style.opacity = "0%"
    },
    enter: function (el, done) {
      Velocity(el, 'mqs.slideUpIn', {complete: done} )
    },
    leave: function (el, done) {
      Velocity(el, 'mqs.slideDownOut', {complete: done} )
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>

style.css

#app {
  text-align: center;
}

vuejs-velocityjs-transition.markdown

vuejs velocityjs transition

A Pen by Edward Lance Lorilla on CodePen.

License.