将 Vuejs Anime 组件添加到 Vue Cli答案

【问题标题】：Adding Vuejs Anime components to Vue Cli将 Vuejs Anime 组件添加到 Vue Cli
【发布时间】：2019-01-13 17:52:58
【问题描述】：

我是 vuejs 动画的新手。在我的网页中，我想添加一个示例 Vue-Anime 组件sample components 到我当前的 Vue CLI 项目。在我安装了 vue-animejs 之后。

我使用了模板代码。我怎样才能使用这个模板来使它工作？请帮忙。

<template>
  <div v-anime="{ rotate: '1turn', backgroundColor: '#ffffff', duration: 2000, loop: true }"></div>
</template>

export default {
 name: "my-component",
 data() {
 return {};
 },
 mounted() {
  this.$anime(/* ... animate something ... */)
 },
}

【问题讨论】：

@li-x 标题是正确的。 OP 正在询问如何集成特定插件，而不是通用动画。
@zero298，哦，原来是入口代码，让人们知道如何让整个动画库工作。

标签： javascript animation vuejs2 vue-component

【解决方案1】：

更多信息请参考项目的 Github 页面。自述文件提供了如何开始的想法。

https://github.com/BenAHammond/vue-anime

下面是另一个例子（大部分取自anime.js Github page）

将以下内容放入您的模板中：

<div v-anime="{ translateX: 100, duration: 2000, loop: true, direction: 'reverse', autoplay: true }">
O
</div>

简而言之，任何要制作动画的东西，您都可以将其提供给模板中的 v-anime 指令或组件脚本中的 this.$anime() 函数。

【讨论】：

除了我在问题上发布的示例之外，您介意再给我看一个关于 vuejs 的示例吗？
@dlfjj 用另一个例子更新了答案。此外，为了让您的代码正常工作，请在您的 div 中添加一些内容。