Question

我正在尝试在我的项目中使用Velocity.js，将Vue用于前端，将Laravel用于后端。

我尝试使用VelocityUI插件来设置序列但是，因为它在“on enter”事件中工作正常，所以它不会在“休假”中，因为没有办法让它成为e promise并调用之后的“完成”事件......我的事件创造了我自己的承诺而没有成功。

其次，我无法使用UI包中的预制效果，因为我无法将它们链接到$ el.getElementsByTagName（'p'）。velocity（）...它没有找到Velocity那里...我试图在很多方面将它添加到Vue，但找不到办法...

请你帮我解决我的问题，或者给我一些线索，因为我几乎到处都没有成功。

亲切的问候。

FrançoisHoulbrèque

Answer 1

这是一个示例代码片段和一支笔，可以为您提供帮助。

new Vue({
  el: '#app',
  data() {
    return {
      velocityUI: [
        "flash",
        "headShake",
        "jello",
      ],
      selected: "flash"
    }
  },
  methods: {
    expandBox() {
      var vm = this
      Velocity(vm.$refs.expandBoxComplete, vm.selected)
    }
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>

<div id="app">
  <select v-model="selected">
    <!-- inline object literal -->
    <option v-for="velocity in velocityUI" v-bind:value="velocity">{{velocity}}</option>
  </select>
  <button @click="expandBox">animate!</button>
  <div ref="expandBoxComplete" class="box"></div>

</div>

这是笔 https://codepen.io/anon/pen/wQZQLJ

转换中的VelocityJS，velocity.ui和VueJS 2问题

1 个答案: