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

【问题标题】：Why anime.js doesn't work on a click in vuejs?为什么anime.js在vuejs中点击不起作用？
【发布时间】：2020-03-19 15:51:25
【问题描述】：

现在，感谢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>

【问题讨论】：

你能试着把这个@click="testClickGo().restart"换成这个@click="testClickGo"吗？
是的，但无济于事=(
和testClickGo()?
也不行
您真的需要<h1> 上的这种内联样式吗？您可以将其移除或将点击事件添加到 h1 标签中。

标签： javascript vue.js animation anime.js

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

【讨论】：