javascript - 为什么anime.js在vuejs中点击不起作用？

Question

现在，感谢mounted()，当页面更新时动画可以成功运行，但是由于某种原因，当你点击它时动画没有播放。

单击时会输出 console.log，但没有动画。我的错误是什么？

<template>
  <div class="compHeader">
    <h1 class="testVal" style="position: absolute;">QWERTY</h1>
    <button type="button" class="testClick" @click="testClickGo().restart">+</button>
  </div>
</template>

<script>
  export default {
    methods: {
      testClickGo(){
        console.log(111);
        return this.$anime({
          targets: '.testVal',
          translateX: 200,
          delay: 800
        });
      }
    },
    mounted(){
      this.testClickGo();
    }
  }
</script>

标签： javascriptvue.jsanimationanime.js

Answer 1

我找到了我的问题的答案。

<template>
  <div class="compHeader">
    <h1 ref="animeEl">hello, world!!</h1>
    <button @click="anime.restart()">click me</button>
  </div>
</template>
<script>
data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
}
</script>