React中点击按钮触发GSAP动画偶现失效问题求助

你的动画时灵时不灵，核心问题在于React状态更新的异步性和GSAP动画绑定的时机不匹配：

1. 调用showStatusMessage(true)后，React不会立即把<RedBall>渲染到DOM中，此时立刻执行timeline.play()，GSAP找不到.red-ball元素，自然无法播放动画。
2. 全局创建的timeline在组件初始化时就绑定了动画，但此时<RedBall>还不存在，GSAP的fromTo没有找到目标元素，后续元素挂载后也不会自动重新绑定，导致动画失效。

调整动画的创建和播放时机，确保<RedBall>挂载到DOM后再初始化并启动动画，同时在请求完成后自动停止动画。

修改后的App.js代码 #

import React, { useState, useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import './App.css';
import DataInput from './Components/data-input';
import Footer from './Components/footer';
import Header from './Components/header';
import RedBall from './Components/red-ball';

function App() {
  const [messageData, setMessageData] = useState(null);
  const [zipData, setZipData] = useState(null);
  const [screenShotData, setScreenshotData] = useState(null);
  const [statusMessage, showStatusMessage] = useState(false);

  const tl = useRef(null);
  const app = useRef(null);

  // 监听状态变化，控制动画的创建/播放/销毁
  useEffect(() => {
    // 当需要显示加载动画时（statusMessage为true且无返回消息）
    if (statusMessage && !messageData) {
      // 创建新的timeline，自动播放
      tl.current = gsap.timeline({ repeat: -1, yoyo: true });
      const ctx = gsap.context(() => {
        tl.current.fromTo('.red-ball', 0.5, { autoAlpha: 0, x: 0 }, { autoAlpha: 1, x: 20 });
      }, app.current);

      // 清理函数：销毁动画和上下文
      return () => {
        ctx.revert();
        tl.current?.kill();
      };
    } else {
      // 停止并销毁动画
      tl.current?.pause().kill();
    }
  }, [statusMessage, messageData]);

  const getScreenshotData = (screenShotData) => {
    setScreenshotData(screenShotData);
    showStatusMessage(true);
    setMessageData('');
    setZipData('');

    fetch(`/dcsgrab?tearsheetUrl=${screenShotData}`)
      .then((response) => response.json())
      .then((data) => {
        const zipBlob = new Blob([new Uint8Array(data.zipFile.data)], { type: "octet/stream" });
        const url = window.URL.createObjectURL(zipBlob);
        const zipDownload = document.createElement("a");

        setMessageData(data.message);
        setZipData(zipBlob);

        zipDownload.href = url;
        zipDownload.download = "screenshot-download.zip";
        document.body.appendChild(zipDownload);
        zipDownload.click();
        document.body.removeChild(zipDownload); // 清理DOM元素
        window.URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
      })
      .catch((err) => {
        // 处理请求错误，确保动画停止
        setMessageData('截图获取失败，请重试');
        console.error(err);
      });
  };

  return (
    <div className="App" ref={app}>
      <Header />
      <DataInput getScreenshotData={getScreenshotData} />
      {statusMessage && (
        <>
          <p>{messageData || 'Taking screenshots...'}</p>
          {!messageData && (
            <div className="waiting-anim-container">
              <RedBall />
            </div>
          )}
        </>
      )}
      <Footer />
    </div>
  );
}

export default App;

关键修改点 #

1. 移除全局timeline：改为在组件内部用useRef动态创建，确保每次动画都是针对当前DOM中的元素。
2. 用useEffect监听状态：当statusMessage为true且messageData为null时（即需要显示加载动画），创建并启动动画；状态变化时自动停止并销毁动画。
3. 清理资源：在fetch完成后移除创建的<a>元素并释放URL对象，避免内存泄漏；动画清理函数销毁GSAP上下文和timeline。
4. 简化条件渲染：用更简洁的JSX写法，提升代码可读性。

给<RedBall>组件添加ref，直接通过ref获取DOM元素，避免依赖类选择器，让动画绑定更可靠：

// 在App.js中添加RedBall的ref
const redBallRef = useRef(null);

// 在useEffect的动画中使用ref
tl.current.fromTo(redBallRef.current, 0.5, { autoAlpha: 0, x: 0 }, { autoAlpha: 1, x: 20 });

// 在JSX中传递ref
<RedBall ref={redBallRef} />

// 修改RedBall.js为forwardRef
import React, { forwardRef } from 'react';
const RedBall = forwardRef((props, ref) => {
    return <div className="red-ball" ref={ref}></div>;
});
export default RedBall;

这样可以避免类选择器可能带来的冲突，动画绑定更精准。

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