在映射的div上使用选择器

Question

我正试图使用gsap用以下代码来动画化我的.gallery-item：

const MoveItMoveIt = () => { 
gsap.from('.gallery-item', { delay: .4,  duration: 3, y: 110, ease: "elastic(1, 0.5)", stagger: '0.4'}) 
}

我有画廊被映射成这样：

{pets.map((pets) => {
return (
<div className="col-sm-4 gallery-item  text-center">
<div className="" key={pets.user}>
<div className="">
snip
</div>
</div>
);
})}

问题是我得到了错误gsap target not found我知道这是因为函数在.gallery-item存在之前的毫秒内启动，因此函数找不到它

我尝试了一个if语句来查看.gallery-item是否存在，然后运行该函数。但是if语句只是告诉我它并不存在。我也尝试过使用setTimeout()方法，但没有成功。

如何解决这个时间问题？我这样调用我的函数：

useEffect(() => {
getPetInfo();



MoveItMoveIt()
}, []);

Answer 1

感谢您对评论者的帮助。我能够通过将我的gsap函数放入我的api调用中来解决这个问题。

async function getPetInfo() {
const response = await fetch(
"my webhook url"
);
const json = await response.json();
console.log(json);
setPets(json.pets);
MoveItMoveIt()
}
const MoveItMoveIt = () => { 
const box = document.getElementsByClassName('.gallery-item')
gsap.from('.gallery-item', { delay: .4,  duration: 3, y: 110, ease: "elastic(1, 0.5)", stagger: '0.4'})
}

它现在按预期工作。