Vue.js 与anime.js 一起使用答案

【问题标题】：Vue.js working with anime.jsVue.js 与anime.js 一起使用
【发布时间】：2018-09-26 07:47:42
【问题描述】：

我有一个 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.

【问题讨论】：

请在问题描述中包含代码。问题应该是独立的，并且到场外资源的链接应该主要用作额外的来源。
@EmileBergeron 感谢您的反馈。我编辑了我的帖子，所以我认为现在更清楚了。
请避免使用代码图片。

标签： webpack vue.js vue-component anime.js

【解决方案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.

【讨论】：