Vue中基于anime.js的点击/路由触发SVG变形动画异常问题排查

我来帮你拆解下这个在Vue（包括Nuxt）中结合anime.js实现路由切换SVG变形的问题，你遇到的v-show和v-if的冲突其实都是DOM渲染时机和动画执行时机不匹配导致的，下面一步步分析并给出解决方案：

问题根源分析 #

1. v-show首次加载动画失效 #

v-show是通过display: none控制元素显示/隐藏，首次页面刷新时，虽然你的动画函数已经执行，但此时对应的SVG path元素可能还没完成DOM渲染（或者刚从display: none切换为显示），anime.js无法正确捕捉到元素的初始状态，导致动画执行了但视觉上没有效果。

2. v-if切换时卡顿 #

v-if是直接创建/销毁DOM元素，首次加载时元素刚被创建，动画能正常触发，但每次路由切换都会销毁旧的path并创建新的，频繁的DOM操作会触发重绘重排，导致画面卡顿。

优化解决方案 #

核心思路是避免频繁创建/销毁DOM元素，改用单个SVG path动态控制其d属性，同时确保动画执行时机与DOM渲染同步。

修改后的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元素，初始绑定对应路由的形状 -->
      <path class="morph-path1" :d="initialShape.d" />
    </g>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      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" }
      ]
    };
  },
  computed: {
    // 根据当前路由获取初始形状
    initialShape() {
      return this.$route.name === 'Home' ? this.shapes[0] : this.shapes[1];
    }
  },
  watch: {
    // 监听路由变化，自动触发变形动画
    async $route(to) {
      // 等待DOM更新完成，确保动画能正确捕捉元素状态
      await this.$nextTick();
      const targetShape = to.name === 'Home' ? this.shapes[0] : this.shapes[1];
      this.changeMorph(targetShape);
    }
  },
  methods: {
    changeMorph(targetShape) {
      this.$anime({
        targets: '.morph-path1',
        d: targetShape.d,
        duration: 1000,
        easing: 'linear',
        elasticity: 2000,
        loop: false
      });
    }
  }
};
</script>

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

.morph-path1 {
  fill: #333; /* 记得设置填充色，否则看不到形状 */
}
</style>

修改后的App.vue代码 #

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <Logo />
    <router-view/>
  </div>
</template>

<script>
import Logo from './components/Logo'
export default {
  name: 'App',
  components: { Logo }
}
</script>

优化点说明 #

1. 单个Path元素：不再用v-if/v-show切换多个path，而是始终保持一个path元素，通过动画修改其d属性，彻底避免DOM创建/销毁带来的卡顿。

2. 路由监听自动触发动画：通过watch $route监听路由变化，自动触发对应形状的变形动画，不管是点击链接还是直接访问URL，都能保证动画正常执行。

3. DOM渲染时机同步：用await this.$nextTick()确保动画执行前，DOM已经完成更新，anime.js能正确获取元素的初始状态，解决首次加载动画失效的问题。

4. 简化父组件逻辑：不再需要通过ref调用子组件方法，路由变化自动触发动画，代码更符合Vue响应式设计。

内容的提问来源于stack exchange，提问作者Annamária Nébl