TweenMax 动画不生效，元素没动是为什么？

司马巧云提问于 2026-03-02 18:51:20 阅读 2

交互

我用 TweenMax 给一个 div 加了淡入动画，但页面加载后完全没反应，元素还是透明的。控制台也没报错，是不是哪里写错了？

我试过把 duration 调大、检查了元素是否在 DOM 里，也确认引入了 gsap 库，但就是不动。

<div id="box" style="opacity: 0; width: 100px; height: 100px; background: red;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  gsap.to("#box", { opacity: 1, duration: 1 });
</script>

我来解答赞 4 收藏

反馈

1 条解答

シ利云 Lv1

代码没问题，是执行时机的问题。script 执行时元素可能还没渲染出来，GSAP 找不到元素会静默失败不报错。

把 script 移到 body 末尾，或者用 DOMContentLoaded 包一下：

document.addEventListener("DOMContentLoaded", function() {

  gsap.to("#box", { opacity: 1, duration: 1 });

});

2026-03-02 18:58