如何在Vue-Cli项目中使用anime.js（或任何外部库）？

Question

我使用npm作为依赖项安装了Anime.js到我的项目中。 现在我有一个java脚本文件“animate”，我有我的动漫代码。 如何将我的组件与我的动画文件链接以实现魔力？ 谢谢你的阅读。

我的animate.js文件

我是如何尝试将我的animate文件与我的组件链接的

Answer 1

Anime.js可在NPM获得。要与vue-cli一起使用，请先安装它：

npm install --save animejs

在 animate.js 文件中，导入anime功能：

import anime from 'animejs';

在此之后，anime()函数将可在该文件中使用，并可用于生成动画。例如：

import anime from 'animejs';

export function translate(element) {
  anime({
    targets: element,
    translateX: 500
  });
}

请注意导出translate功能。

现在使用import { translate } from './animate';导入组件中的函数。要获取对DOM元素的引用，you can use refs：

<template>
  <div>
    <button @click="go">Click Here to Animate</button>
    <div class="block" ref="square"></div>
  </div>
</template>

<script>
import { translate } from './animate';

export default {
  methods: {
    go() {
      translate(this.$refs.square);
    }
  }
};
</script>

CodeSandbox demo here

Answer 2

import anime from "animejs";
export default {
  methods: {
    animatesircles() {
      anime({
        targets: ".banner",
        backgroundColor:"#6c6c6c",
        easing: "linear",
        delay: 800,
        duration:200
      }); 
    }
  },
  mounted(){
    this.animatesircles()
  }
}