[英]GSAP & ReactJs. Console warnings: GSAP target undefined not found. & GSAP target not found
I tried to make a simplified version of what I experienced in another project with using GSAP.我试图制作我在另一个项目中使用 GSAP 体验的简化版本。 Essentially I get 2 warning in the console.
基本上我在控制台中收到 2 个警告。
GSAP target undefined not found.
未找到 GSAP 目标未定义。
GSAP target not found.
未找到 GSAP 目标。
I tried to make a modal that it will render if the state is equal to true.我试图制作一个模态,如果状态等于真,它将呈现。 Else it will return null.
否则它将返回空值。
I believe my issue is due to returning null.我相信我的问题是由于返回 null。 But I don't know how to do this another way.
但我不知道如何以另一种方式做到这一点。
I experimented with the kill() option in gsap, but I had no luck with it.我在 gsap 中尝试了 kill() 选项,但我没有运气。 Here is the reference from the docs that I read.
这是我阅读的文档中的参考。 Gsap Docs about Cleanup
关于清理的 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;
}
}
I posted this also on Greensock forums.我也在 Greensock 论坛上发布了这个。 Thanks to OSUblake an Admin over at Greensock, he was able to solve my issue.
感谢 OSUblake 是 Greensock 的管理员,他能够解决我的问题。 To help others here's what he said.
他说的是帮助他人。
Your effect is running every time the props changes, so you're going to create a new animation every time, so of course the target will not be found if it's not rendered.
每次 props 改变时你的效果都会运行,所以你每次都会创建一个新的动画,所以如果没有渲染,当然不会找到目标。 You would need to do something like this.
你需要做这样的事情。
useLayoutEffect(() => {
if (props.toggleModal) {
gsap.from(box.current, {
...
});
}
}, [props.toggleModal])
You can import useLayoutEffect from react.您可以从 react 中导入 useLayoutEffect。
Please check out our React Guide for more information.
请查看我们的 React 指南以获取更多信息。 https://greensock.com/react/
https://greensock.com/react/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.