В JavaScript, как я могу добавить эффект анимации на каждое изображение в модальной галерее? - PullRequest
Новая
       41

В JavaScript, как я могу добавить эффект анимации на каждое изображение в модальной галерее?

1 голос
/ 14 марта 2020

У меня есть галерея изображений, каждое из которых открывается по щелчку в модальном режиме. Я хочу добавить эффект анимации к каждому из них, который будет отображаться при нажатии следующей и предыдущей кнопок. Я добавил стиль анимации в свой код JS, однако он не работает должным образом. Работает только на первый клик, а не на остальные.

Вот мой код: 


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

    function nextImage() {
      if (currentIndex < imgArr.length - 1) {
        currentIndex++;
        modalImg.src = imgArr[currentIndex].style.backgroundImage
          .slice(4, -1)
          .replace(/"/g, "");
      }
      modalImg.style.animation = "fadeInLeft .4s both";
    }

    function previousImage() {
      if (currentIndex > 0) {
        currentIndex--;
        modalImg.src = imgArr[currentIndex].style.backgroundImage
          .slice(4, -1)
          .replace(/"/g, "");
      }
      modalImg.style.animation = "fadeInLeft .4s both";
    }


    @keyframes fadeInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
    }

Ответы [ 2 ]

3 голосов
/ 14 марта 2020

Вы можете достичь этого с помощью манипуляции с анимацией через свойство animationName или с помощью манипуляции с помощью имени класса, который определил анимацию.

См. пример

В любом случае Вы должны удалить анимацию, когда она завершится 

function onAnimationEnd(){
/*
  // Options 1: Manipulate class name
  this.classList.remove('fade')
*/
  imgContainer.style.animationName = 'none';
}
imgContainer.addEventListener('animationend', onAnimationEnd);
1 голос
/ 14 марта 2020

Вы можете упростить, чтобы избежать повторения: 

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 переменных): 

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

function showImage(elem) {
    if (elem.id === "next" || elem.id === "modalImg") {
        currentIndex = (currentIndex + 1) % imgArr.length;
    } else if (elem.id === "prev") {
        currentIndex = (currentIndex + imgArr.length - 1) % imgArr.length;
    } else {
        return currentIndex
    }
    animate(currentIndex)
}

window.addEventListener("click", function(e) {
    showImage(e.target)
});
...