如何将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"就可以在悬停时开始动画。