单击事件上的 SVG 动画无法在 Vue 中使用anime.js

如何解决单击事件上的 SVG 动画无法在 Vue 中使用anime.js

我正在尝试使用基于点击事件和路由更改的anime.js 实现一个svg 动画。第一个形状属于“home”路线，第二个形状属于“about”路线。动画是logo组件中的一个方法，通过点击父组件中的路由链接来调用。如果我使用 v-show 有条件地呈现 svg 路径，则动画工作正常，除了第一次加载和刷新页面后。奇怪的是，该函数实际上正在执行，它也可以在 devtools 中观察到。如果我使用 v-if 动画在第一次加载和重新加载后都有效，但它会出现故障。

logo.vue：

<template>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
    <g>
      <path v-if="mypath=='Home'" class="morph-path1" :d="shapes[0].d"  />
      <path v-if="mypath !='Home'" class="morph-path1" :d="shapes[1].d" />
    </g>
  </svg>
</template>

<script>
export default {
    data(){
      return{
        mypath:this.$route.name,shapes: [
            {
                d: "M181.5,471.5c18.2-78.7,33.4-140.4,90-181c74.4-53.3,188.2-47,263,0c86.2,54.2,79.1,136.3,139,146c75.8,12.2,111.1-115.3,205-119c86.6-3.4,171.8,100.5,199,194c46.1,158.4-56.7,346.2-178,378c-120.6,31.6-173.7-113.2-357-115c-175-1.7-244.9,129.2-324,85C109.3,798.4,172.7,509.4,181.5,471.5z"
            },{
                d: "M207.5,399.5c18.7-45.4,67.8-164.7,186-189c115.6-23.7,243.9,54.6,266,144c19.8,80.1-56.2,126.7-31,181c41.2,88.9,262.8,3.5,335,98c65.9,86.2,4.1,317.8-165,394c-173.8,78.4-387.9-40.5-415-154c-17-71.1,44.6-118.5,13-176c-39.8-72.4-157.2-33-205-109C154.2,529.1,188.4,445.9,207.5,399.5z"
            }
        ]
      }
    },watch: {
      $route() {
        this.mypath=this.$route.name
      }
    },methods: {
    
      clickEvent(emitter){

        if(emitter=="home"){
          this.changeMorph({value: this.shapes[0].d});
        }else{
          this.changeMorph({value: this.shapes[1].d});
        }
        },changeMorph(shape) {
        this.$anime({
              targets: '.morph-path1',d: [
                  shape,],duration: 1000,direction: 'alternate',autoplay: true,easing: 'linear',elasticity: 2000,loop: false
            });
      }
    },}
</script>

<style>
svg {
  width: 400px;
  height: 400px;
  display: inline-block;
}
</style> 

App.vue：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/"  >
        <span @click="$refs.myChild.clickEvent('home')">Home</span>
      </router-link>
      <router-link to="/about"  >
        <span @click="$refs.myChild.clickEvent('about')">About</span>
      </router-link>
    </div>
    <logo ref="myChild"/>
    <router-view/>
  </div>
</template>

<script>
import  logo  from './components/logo'

export default {
  name: 'App',components: {
    logo
  }
}
</script>

我最初尝试用 Nuxt 实现它，结果是一样的，可以在这里找到那个版本：

https://github.com/neblancsi/svg-morphing

https://svg-morphing.netlify.app/