Question

我正在安装一个以安装Anime.js作为依赖的Vue.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合作

1 个答案: