Vue.js 与 anime.js 合作

Question

我有一个 Vue.js 项目，其中 Anime.js 作为依赖安装。

<template>
    <div 
        ref="logo" 
        class="logo" >
        <svg viewBox="0 0 435.6 141.4" >
            ...
        </svg>
    </div>
</template>     

<script>
import { logoAnimation } from "../assets/animate";

export default {
  data() {
    return {};
  },
  methods: {
    mounted() {
      logoAnimation.init(this.$refs.logo);
    }
  }
};
</script>

我假设我做错的是方法，我不知道如何获取所有 SVG 路径以正确地为它们设置动画，我希望动画在页面加载后立即开始。

import anime from "animejs";

export function logoAnimation(element) {
  anime({
    targets: element,
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: "easeInOutSine",
    duration: 2000,
    delay(el, i) {
      return i * 250;
    }
  });
}

Here you can check what is my goal and what I try to accomplish using Vue also.

Answer 1

mounted() 不应在 methods 内声明。它应该直接在对象中。

此外，您使用的动画需要 path 个元素（列表）。所以我将 ref 移动到 <svg> 元素并添加了 .children:

<template>
    <div 
        class="logo" >
        <svg viewBox="0 0 435.6 141.4" ref="logo">

export default {
  data() {
    return {};
  },
  mounted() { // not inside methods anymore
    logoAnimation(this.$refs.logo.children); // added.children
  }
};

Updated CodeSandbox here.

Vue.js 与 anime.js 合作

Vue.js working with anime.js

webpack

vue.js

vue-component

anime.js