Vue中如何通过Props传递maxWidth至GSAP Timeline实现按钮动画？

问题根源 #

1. 单位兼容性问题：如果传入的maxWidth是带单位的字符串（比如"80%"或"200px"），直接使用calc(${this.maxWidth} + 5%)会出现单位不匹配的情况（例如px与%直接相加无效），导致GSAP无法正确解析动画目标值。
2. 上下文与写法细节：虽然当前方法内的this能访问Vue实例，但GSAP对动态表达式的解析需要更严谨的写法。

修复方案 #

方案1：提取数值统一计算（适合百分比单位场景） #

如果你的maxWidth是百分比类型，可直接提取数值计算后拼接单位：

props: {
  maxWidth: {
    type: String,
    required: true,
  },
},

methods: {
  buttonTo(path) {
    // 提取maxWidth的数值部分，移除单位
    const baseValue = parseFloat(this.maxWidth);
    // 计算目标宽度：基础值 + 5%
    const targetWidth = `${baseValue + 5}%`;

    const pushToPath = () => {
      this.$router.push({ path: path });
    };

    let tl = this.$gsap.timeline({
      onComplete: pushToPath
    });
    tl.to(this.$refs.primaryButton, {
      duration: 0.6,
      ease: 'power2.in',
      maxWidth: targetWidth,
    });
  },
},

方案2：使用GSAP兼容的calc语法（通用场景） #

GSAP支持直接解析calc表达式，同时可以通过工具函数处理单位转换：

props: {
  maxWidth: {
    type: String,
    required: true,
  },
},

methods: {
  buttonTo(path) {
    const pushToPath = () => {
      this.$router.push({ path: path });
    };

    let tl = this.$gsap.timeline({
      onComplete: pushToPath
    });
    tl.to(this.$refs.primaryButton, {
      duration: 0.6,
      ease: 'power2.in',
      // 直接使用calc表达式，确保单位一致
      maxWidth: `calc(${this.maxWidth} + 5%)`,
      // 若单位不统一，可转成px后计算：
      // maxWidth: `calc(${this.$gsap.utils.toPx(this.maxWidth)} + 5%)`
    });
  },
},

额外注意事项 #

• 确保this.$refs.primaryButton正确指向按钮DOM元素，避免在DOM未挂载时调用动画（可在mounted钩子后执行，或用nextTick等待DOM渲染完成）。
• 如果props传入的是px单位，建议统一转成百分比后再计算，或使用GSAP的utils.toPx工具函数统一单位。

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