当我点击图像时，动画只起作用一次

Question

我有一个包含3个缩略图的列表还有一个大的，它存储了这些缩略图中的任何一个，我点击

我还有一个动画，当我点击其中一个缩略图时，它会从右侧弹出大图像

问题是，当我单击其中一个图像时，只有当我第一次单击拇指img时才会触发动画。那么动画不起作用

let images = document.querySelectorAll('.thumb-img');
let main = document.querySelector('.main-img');
images.forEach((img) => {
img.addEventListener('click', (e) => {
RemoveActive();
main.src = img.src;
main.classList.add('active');
main.classList.add('active');
});
});
function RemoveActive() {
images.forEach((img) => {
img.classList.remove('active');
main.classList.remove('active');
});
}

.active {
animation: 1s animate;
}
@keyframes animate {
from {
margin-right: -100%;
}
to {
margin-right: 0;
}
}

<ul class="thumb">
<li><img src="https://i.postimg.cc/94K19rp3/pepsi001.png" class="thumb-img" alt="" /></li>
<li><img src="https://i.postimg.cc/r04jNMnD/pepsi002.png" class="thumb-img" alt="" /></li>
<li><img src="https://i.postimg.cc/7JyVBddm/pepsi003.png" class="thumb-img" alt="" /></li>
</ul>
<div class="imgbox">
<img src="https://i.postimg.cc/94K19rp3/pepsi001.png" class="main-img" alt="" />
</div>

Answer 1

动画完成后，您需要删除active类，以便在再次单击时重置。

let images = document.querySelectorAll('.thumb-img');
let main = document.querySelector('.main-img');
images.forEach((img) => {
img.addEventListener('click', (e) => {

images.forEach(one => {
one.classList.add('disabled');

setTimeout(() => {
one.classList.remove('disabled');
}, 1000) // to prevent users from clicking while there is an animation
})

main.classList.remove('active');
main.src = img.src;
main.classList.add('active');

setTimeout(() => {
main.classList.remove('active');      
}, 1000) // to match with css animation time
});
});

Codepen