带有 gsap 的事件监听器答案

【问题标题】：Event Listener with gsap带有 gsap 的事件监听器
【发布时间】：2020-10-03 10:30:58
【问题描述】：

这里有问题

const diplayes=document.querySelectorAll('.qq');
 for(const display of diplayes ){
 display.addEventListener('mouseover',()=>{

const tl = gsap.timeline({defaults:{ease:"power1.out"}});
tl.to('.div',{opacity:1, duration:1});
tl.to('span',{y:'0%', duration:1, stagger:0.25 },"-=1");
display.addEventListener('mouseleave',()=>{
    const tl = gsap.timeline({defaults:{ease:"power1.out"}});
    tl.fromTo('.div',{opacity:1},{opacity:0, duration:1});
    tl.to('span',{y:'10000%', duration:1, });
});

});
}

我有 3 个单独的 div，所以我希望事件单独发生，但是当悬停在任何 div 上时，事件会发生在所有 div 上我该怎么办？

【问题讨论】：

标签： javascript jquery dom event-listener gsap

【解决方案1】：

您正在制作the most common GSAP mistakes 之一：使用一般目标而不是特定目标。正如链接的文章所涵盖的那样，您应该做的是遍历所有实例，为每个实例创建一个动画，并为每个引用该特定动画的实例附加事件侦听器。我在animating efficiently 上的文章中详细讨论了这种方法，我也强烈推荐。

仅供参考，您更有可能在the GSAP forums 上获得更快的回复。

【讨论】：