反应中未找到 GSAP 目标

Question

所以我尝试使用“.dots”选择器为我的跨度元素设置动画，但我收到警告：

所以跨度代表控制栏中的视频数量。

未找到 GSAP 目标 .dots。 https://gsap.com

两个职位

初始代码：

const setupTimelines = () => {
    gsap.set(".dots", {
      visibility: "hidden",
      opacity: 0,
    });

    gsap.to(".dots", {
      visibility: "visible",
      stagger: 0.1,
      opacity: 1,
    });
}

useGSAP(setupTimelines);

<div className="content">
     {videos.map((_, i) => (
        <span className="dots" key={i}>
           <span className="progress" />
        </span>
      ))}
</div>

我尝试使用 useGSAP 和 useEffect 进行更改，但没有成功：

useGSAP(() => {
    if (videos.length > 0) {
      setupTimelines();
    }
  },[videos]);

Answer 1

可能是因为即使加载了视频也找不到

.dots

。您可以尝试检查

.dots

是否确实在 DOM 中。

  useEffect(() => {
    if (videos.length > 0) {
      const dots = document.querySelectorAll('.dots');
      if (dots.length > 0) {
        setupTimelines(); 
      }
    }
  }, [videos]);