velocity vuejs

index.html

<div id="app">
  <div id="div1" ref="expandBox" class="box"></div>
  <div ref="expandBoxTwo" class="box"></div>
  <button @click="expandBox">expandBox</button>
</div>

script.js

new Vue({
  el: '#app',
  methods:{
    expandBox(){
      Velocity(this.$refs.expandBox, {
        width: '300px'
      }, {
        duration: 3000
      })

      Velocity(this.$refs.expandBoxTwo, {
        width: '300px'
      }, {
        duration: 3000,
        delay: 3000
      })
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<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>

style.css

.box{
 width: 100px;
  height:100px;
  background-color: red;
}

velocity-vuejs.markdown

velocity vuejs

A Pen by Edward Lance Lorilla on CodePen.

License.

@edwardlorilla Hi your code helped me, But can you show how I can use animation from velocity UI pack.

Like what would be Vue JS equivalent for $elements.velocity("callout.bounce");