TweenMax 动画结束后元素位置怎么恢复原状？

艳丽 Dev 提问于 2026-03-16 05:21:17 阅读 21

交互

我用 TweenMax 给一个按钮加了个点击缩放动画，但动画播完后元素就停在缩放后的状态了。我想让它动画结束自动回到原始大小，试过加 clearProps: "transform" 但好像没用？

这是我的代码：

gsap.to('.btn', {
  duration: 0.3,
  scale: 0.9,
  clearProps: "transform"
});

是不是哪里写错了？或者有没有更靠谱的办法让它复原？

我来解答赞 10 收藏

反馈

1 条解答

迷人的嘉蕊 Lv1

兄弟，你这个用法不太对。clearProps 是用来清除行内样式的，不是让动画复原的。

最简单的方法是用 yoyo + repeat：

gsap.to('.btn', {

  duration: 0.3,

  scale: 0.9,

  yoyo: true,

  repeat: 1

});

这样动画会执行两遍：第一遍缩放到 0.9，第二遍自动弹回来。yoyo: true 就是让动画往返播放，repeat: 1 表示多播一遍，加起来就是缩小→恢复。

如果你想要点击时缩小、松手时恢复，也可以这样写：

const btn = document.querySelector('.btn');



btn.addEventListener('mousedown', () => {

  gsap.to(btn, { scale: 0.9, duration: 0.15 });

});



btn.addEventListener('mouseup', () => {

  gsap.to(btn, { scale: 1, duration: 0.15 });

});



btn.addEventListener('mouseleave', () => {

  gsap.to(btn, { scale: 1, duration: 0.15 });

});

mouseleave 别忘了加，不然鼠标移出元素后它会卡在缩小状态。

第一种 yoyo 的方式最省事，看你具体需求选一个吧。

2026-03-16 21:04