Vue怎么使用velocity.js中的插件velocity.ui.js？

Question

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <transition>
      <div class="test" ref="test">test</div>
    </transition>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <div class="box-stagger">1</div>
    <div class="box-stagger">2</div>
    <div class="box-stagger">3</div>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a>
      </li>
    </ul>
    <button @click="run">Toggle</button>

  </div>
</template>

<script>
import $ from 'jquery'
import Velocity from 'velocity-animate'

export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      show: false
    }
  },
  methods: {
    run() {
      Velocity($('.test'), "slideUp", { duration: 1500 })

      $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
      Velocity($(".box-stagger"), "transition.slideLeftBigIn", { stagger: 300 });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.test {
  position: relative;
  width: 100px;
  height: 100px;
  background: red
}

.box-stagger {
  position: relative;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #4dd0e1;
}
</style>

按文档随便写个测试例子

    run() {
      Velocity($('.test'), "slideUp", { duration: 1500 })

      $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
      Velocity($(".box-stagger"), "transition.slideLeftBigIn", { stagger: 300 });

box-stagger实现失败，请问应该怎么使用velocity的插件？

Answer 1

问题已解决，直接在组建中import这个插件包即可使用

import 'velocity-animate/velocity.ui.js'

另外，Vue中要使用公有函数方式调用

Velocity($(".box-stagger"), "transition.slideLeftBigIn", { stagger: 300 });