如何将 lottie 与 NuxtJS 一起使用以实现悬停、单击和所有功能正常工作？

Question

我正在使用“vue-lottie”包，但关于如何使用它的信息不多。

我从 Lordicons 获得了 JSON 动画，它显示正确，但我无法使动画在悬停或单击时工作，只能循环或静态（无动画）。

我的组件：

<template>
  <div>
    <lottie
      :options="lottieOptions"
      :width="50"
    />
  </div>
</template>

<script>
import lottie from "vue-lottie/src/lottie.vue";
import * as animationData from "~/assets/about.json";

export default {
  components: {
    lottie
  },
  data() {
    return {
      anim: null, // for saving the reference to the animation
      lottieOptions: {
        animationData: animationData.default,
        loop: false,
        autoplay: false,
      }
    };
  },
  methods: {
    handleAnimation(anim) {
      this.anim = anim;
    },
    stop() {
      this.anim.stop();
    },
    play() {
      this.anim.play();
    },
    pause() {
      this.anim.pause();
    },
  }
};
</script>

并且我在仅导入组件的页面上使用：

...

<AboutIcon />

...

<script>

import AboutIcon from "~/components/AboutIcon.vue";

export default {
  components: {
    AboutIcon,
  },
  data() {
    return {};
  }
};
</script>

Answer 1

根据您提供的代码示例，您忘记附加 @animCreated="handleAnimation" 事件。

所以 this.anim 实际上总是空的。

<template>
  <div>
    <lottie
      :options="lottieOptions"
      :width="50"
      @animCreated="handleAnimation"
    />
  </div>
</template>

那么你只需要设置一个 @mouseover="play" 来在悬停时启动动画。

如何将 lottie 与 NuxtJS 一起使用以实现悬停、单击和所有功能正常工作？

How to use lottie with NuxtJS to have hover, click and all functions working?

vue.js

nuxt.js

lottie