Vue.js 为同类导航按钮添加相同GSAP动画时出现页面移位bug如何解决？

问题核心原因 #

• 事件属性使用错误：mouseover 事件的 event.relatedTarget 指向的是鼠标移入当前元素前所在的元素，而非当前触发hover的按钮。当鼠标从页面空白区域（即body元素）移入按钮时，相当于直接给body添加了宽度变为150px的动画，这就是页面偶发左偏移的根本原因。正确应该使用event.currentTarget，该属性才指向绑定了当前事件监听的目标按钮元素。
• 全局共用时间线冲突：你在data中定义了全局唯一的GSAP时间线实例，两个按钮的hover动画会互相抢占时间线状态，导致动画播放、回退逻辑混乱。

修复方案（支持动画复用+元素安全选择） #

无需修改模板代码，仅调整JS逻辑即可：

<script>
import { gsap } from 'gsap';

export default {
  name: 'Header',
  mounted: function() {
    // 批量初始化所有按钮的独立动画时间线，逻辑仅写一次自动复用
    document.querySelectorAll('.circleAnimation').forEach(el => {
      // 给每个按钮单独挂载时间线实例，互相完全独立不会冲突
      el.tl = gsap.timeline({ paused: true })
        .to(el, { width: '150px'})
        .to(el.querySelector('.circle'), { autoAlpha: 1 }, 0) // 第二个参数0表示两个动画同步执行
    })
  },
  methods: {
    authHover(event) {
      // 直接调用当前按钮自己的时间线播放
      event.currentTarget.tl.play();
    },
    authHoverLeave(event) {
      // 直接调用当前按钮自己的时间线回退
      event.currentTarget.tl.reverse();
    }
  }
}
</script>

优化点说明 #

• 彻底避免了误选全局元素的问题，所有动画都绑定在对应按钮自身
• 后续新增同类hover动画的按钮，仅需添加circleAnimation类即可自动复用动画逻辑，无需修改代码
• 每个按钮的动画状态独立，不会出现互相干扰的问题

内容的提问来源于stack exchange，提问作者robin