香草javascript动画仅适用于一个元素？

我编写了一个动画来淡出页面中的列表项，但它只适用于具有类名的第一个类。网格项，为什么会发生这种情况，以及如何解决此问题？对于第一个网格项，它工作得非常好，而对于其他网格项，它却没有工作

let addCart=document.querySelector（“.add btn”）；
let item=document.querySelector（“.grid item”）；
addCart.addEventListener（“单击”，函数（）{
item.style.animation=“添加购物车”；
item.style.animationDuration=“3s”；
设置超时（（）=>{
item.style.animation=“无”；
}, 1000);
});
@关键帧添加购物车{
0% {
变换：translateY（0px）；
z指数：1000；
}
50% {
转换：translateY（210%）量表（0.3）；
不透明度：0.1；
}
51% {
转化：translateY（-110%）；
}
100% {
变换：translateY（0px）；
}
}
.动画{
动画：添加购物车；
动画持续时间：3s；
}

卡诺一号
$2850
+
捕食者
$2010
+
您需要使用
querySelectorAll
，以便可以将
单击事件侦听器添加到所有元素中

let gridItems=document.querySelectorAll（“.grid item”）；
gridItems.forEach（项目=>{
const button=item.querySelector（'.add btn'）
按钮。addEventListener（'单击'，（）=>{
item.style.animation=“添加购物车”；
item.style.animationDuration=“3s”；
设置超时（（）=>{
item.style.animation=“无”；
}, 1000);
})
})
您需要使用
querySelectorAll
，以便可以将
单击事件侦听器添加到所有元素中

let gridItems=document.querySelectorAll（“.grid item”）；
gridItems.forEach（项目=>{
const button=item.querySelector（'.add btn'）
按钮。addEventListener（'单击'，（）=>{
item.style.animation=“添加购物车”；
item.style.animationDuration=“3s”；
设置超时（（）=>{
item.style.animation=“无”；
}, 1000);
})
})
使用
querySelectorAll
然后使用
forEach
循环所有元素以添加侦听器。使用
querySelectorAll
然后使用
forEach
循环所有元素以添加侦听器。