GSAP 和 ReactJs。控制台警告：未找到未定义的 GSAP 目标。 & 未找到 GSAP 目标

Question

我尝试使用 GSAP 制作我在另一个项目中经历的简化版本。本质上我在控制台中收到 2 个警告。

未找到 GSAP 目标未定义。

未找到 GSAP 目标。

我尝试制作一个模式，如果状态等于 true，它将呈现。否则它将返回 null。

我相信我的问题是由于返回 null 造成的。但我不知道如何以另一种方式做到这一点。

我在 gsap 中尝试了 Kill() 选项，但没有成功。这是我阅读的文档中的参考。 关于清理的 Gsap 文档

import React, { useRef, useEffect } from "react";
import gsap from "gsap";

export default function TestGsap(props) {
  const box = useRef();

  useEffect(() => {
    gsap.from(box.current, {
      y: "500",
      ease: "expo",
      duration: 2,
    });
  });

  if (props.toggleModal === true) {
    return (
      <div>
        <section
          ref={box}
          style={{ width: "10rem", height: "10rem", backgroundColor: "red" }}
        >
          <p>Hello, I am a red box.</p>
        </section>
      </div>
    );
  } else {
    return null;
  }
}

Answer 1

我也在 Greensock 论坛上发布了此内容。 感谢 Greensock 的管理员 OSUblake，他能够解决我的问题。他这么说是为了帮助别人。

每次道具改变时你的效果都会运行，所以你每次都会创建一个新的动画，所以如果不渲染当然不会找到目标。你需要做这样的事情。

useLayoutEffect(() => {
  if (props.toggleModal) {
    gsap.from(box.current, {
      ...
    });
  }
}, [props.toggleModal])

您可以从react导入useLayoutEffect。

请查看我们的 React 指南以获取更多信息。 https://greensock.com/react/

Answer 2

GSAP 提供了一个开箱即用的钩子，用于在框架中实现 GSAP 动画，最重要的是用于反应。因为我们必须在动画完成后保持清理工作。有时，处理复杂动画的清理工作会变得非常乏味。我强烈建议使用 @gsap/react 包的 useGSAP() 钩子。

请参阅以下链接以获取更详细的文档。希望它能解决问题。 :) 使用GSAP()