React中gsap.from()动画无法完整执行问题如何修复

问题表现 #

需要实现元素背景从红色过渡到PNG图片正常显示的效果，但动画启动后会立即终止，无法完成完整的过渡流程。

复现代码 #

组件代码 #

import { useRef, useEffect } from "react";
import gsap from "gsap";
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const img = useRef(null);

  useEffect(() => {
    gsap.from(img.current, { duration: 1, backgroundColor: "red" });
  }, []);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a
          href="https://reactjs.org"
          target="_blank"
        >
          <img
            ref={img}
            src={reactLogo}
            className="logo react"
            alt="React logo"
          />
        </a>
      </div>
      <h1>Vite + React</h1>
    </div>
  );
}

export default App;

package.json配置 #

{
  "name": "gsap-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "gsap": "^3.10.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "vite": "^3.0.0"
  }
}

故障原因 #

• React 18开发环境默认开启严格模式，组件会重复执行一次挂载、卸载流程。第一次挂载时创建的GSAP动画没有被主动清理，第二次挂载时初始样式状态被污染，动画直接跳转到终点状态，看起来像是启动后立刻终止。
• img标签默认没有显式设置背景色，GSAP计算from动画的终点样式时会拿到空值，导致过渡逻辑异常。

修复方案 #

快速验证方案（不推荐生产使用） #

直接关闭React严格模式，找到项目入口文件main.jsx，删除包裹根组件的<React.StrictMode>标签即可。该方案仅适合本地快速验证效果，严格模式的重复调用逻辑可以提前排查未清理的副作用问题，不建议直接关闭。

生产环境推荐方案 #

在useEffect中保存GSAP动画实例，组件卸载时主动调用kill方法清理实例，同时用fromTo方法显式指定动画的起始、终点状态，避免样式计算偏差。
修改后的useEffect代码如下：

useEffect(() => {
  // 显式指定起始为红色背景，终点为透明背景，动画时长1s
  const animation = gsap.fromTo(
    img.current,
    { backgroundColor: "red" },
    { duration: 1, backgroundColor: "transparent" }
  );
  // 组件卸载时清理动画实例，避免内存泄漏和状态污染
  return () => animation.kill();
}, []);

如果不想使用fromTo方法，也可以提前在CSS文件中给目标img元素设置background-color: transparent，再配合上述动画实例清理逻辑，同样可以解决动画中断的问题。

内容的提问来源于stack exchange，提问作者tst.flopp