TweenMax 动画结束后元素位置怎么回弹了？

♫羽沫提问于 2026-03-15 22:21:19 阅读 40

交互

我用 TweenMax 给一个 div 做了位移动画，从 left: 0 移动到 left: 200px，动画完成后却发现元素又跳回原来的位置了。明明没写 reverse 或者其他重置逻辑啊？

我试过加 overwrite: true 和 clearProps: false，但都没用。是不是哪里默认行为没注意到？代码大概是这样的：

gsap.to('.box', {
  duration: 1,
  left: '200px',
  ease: 'power2.out'
});

TweenMax 用户体验

我来解答赞 12 收藏

反馈

1 条解答

端木柯佳 Lv1

这个问题很典型，十有八九是 CSS 的 transition 在搞鬼。

你检查一下那个 div 的 CSS，有木有写 transition: all 0.3s 之类的？如果有的话，GSAP 动画是跑完了，但 CSS 的 transition 会默默地把属性"过渡"回原始值，看起来就像回弹了。

解决办法很简单：

第一种，在动画开始前把 transition 关掉：

gsap.set('.box', { transition: 'none' });

gsap.to('.box', {

  duration: 1,

  left: '200px',

  ease: 'power2.out'

});

第二种，用 overwrite 参数硬刚：

gsap.to('.box', {

  duration: 1,

  left: '200px',

  ease: 'power2.out',

  overwrite: 'auto'

});

第三种，动画结束后强制设置一下最终值当"定心丸"：

gsap.to('.box', {

  duration: 1,

  left: '200px',

  ease: 'power2.out',

  onComplete: function() {

    gsap.set('.box', { left: '200px' });

  }

});

如果是 WordPress 主题的问题，有些主题会全局性地给所有元素加过渡效果，这种情况下第一种方法最稳，在你的动画脚本开头先统一清掉 transition。

你先试试第一种，看看能不能解决。

2026-03-16 20:19