在JavaScript中，如何在模式库中的每个图像上添加动画效果？

我有一个图像库，每一个都会在点击时以模式打开。我想为每一个按钮添加动画效果，以便在单击“下一个”和“上一个”按钮时显示。我将动画样式添加到我的JS代码中，但是它没有按预期工作。它只在第一次单击时起作用，其余部分不起作用

这是我的密码：

var prev=document.querySelector（“prev”）；
var next=document.querySelector（“#next”）；
next.addEventListener（“单击”，下一页）；
modalImg.addEventListener（“单击”，下一页）；
prev.addEventListener（“单击”，previousImage）；
函数nextImage（）{
如果（当前索引0）{
当前索引--；
modalImg.src=imgArr[currentIndex].style.backgroundImage
.切片（4，-1）
.替换（/“/g，”）；
}
modalImg.style.animation=“fadeInLeft.4s两者”；
}

@关键帧淡入淡出{
0% {
不透明度：0；
-webkit转换：translateX（-20px）；
-ms变换：translateX（-20px）；
转换：translateX（-20px）；
}
100% {
不透明度：1；
-webkit转换：translateX（0）；
-ms变换：translateX（0）；
变换：translateX（0）；
}
}

您可以通过已定义动画的属性

animationName

或通过类名称操纵动画来实现

看

在任何情况下，都应该在动画完成后删除动画

function onAnimationEnd(){
/*
  // Options 1: Manipulate class name
  this.classList.remove('fade')
*/
  imgContainer.style.animationName = 'none';
}
imgContainer.addEventListener('animationend', onAnimationEnd);

---

可以通过已定义动画的属性

animationName

操纵动画或通过类名称操纵动画来实现

看

在任何情况下，都应该在动画完成后删除动画

function onAnimationEnd(){
/*
  // Options 1: Manipulate class name
  this.classList.remove('fade')
*/
  imgContainer.style.animationName = 'none';
}
imgContainer.addEventListener('animationend', onAnimationEnd);

---

您可以简化以避免重复：

const prev = document.querySelector("#prev");
const next = document.querySelector("#next")
prev.addEventListener("click", prevImage);
next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);

function animate(i) {
  modalImg.src = imgArr[i].style.backgroundImage
    .slice(4, -1)
    .replace(/"/g, "");
  modalImg.style.animationName = "fadeInLeft";
}

function nextImage() {
  currentIndex = (currentIndex + 1) % imgArr.length;
  animate(currentIndex)
}

function prevImage() {
  currentIndex = (currentIndex + imgArr.length - 1) % imgArr.length;
  animate(currentIndex)
}

或者只使用一个事件侦听器（不需要

prev

和

next

变量）：

---

您可以简化以避免重复：

const prev = document.querySelector("#prev");
const next = document.querySelector("#next")
prev.addEventListener("click", prevImage);
next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);

function animate(i) {
  modalImg.src = imgArr[i].style.backgroundImage
    .slice(4, -1)
    .replace(/"/g, "");
  modalImg.style.animationName = "fadeInLeft";
}

function nextImage() {
  currentIndex = (currentIndex + 1) % imgArr.length;
  animate(currentIndex)
}

function prevImage() {
  currentIndex = (currentIndex + imgArr.length - 1) % imgArr.length;
  animate(currentIndex)
}

或者只使用一个事件侦听器（不需要

prev

和

next

变量）：

---

你能添加一个工作片段，这将有助于解决你的问题。当然。我没有这样做，因为它的长度。但我现在将制作一个片段供您查看。您是否可以添加一个工作片段，这将有助于解决您的问题。当然可以。我没有这样做，因为它的长度。但我现在要给你一个片段，让你看看。这是一个很好的建议。但是，我使用%更改了“上一个”和“下一个”按钮的代码，以便能够在库中循环。有没有办法让它也变干？代码如下：我在查看了您的代码后更改了答案；）这很好。谢谢：）这是一个很好的建议。但是，我使用%更改了“上一个”和“下一个”按钮的代码，以便能够在库中循环。有没有办法让它也变干？代码如下：我在查看了您的代码后更改了答案；）这很好。谢谢：）