[英]In JavaScript, how can I add animation effect on every image in a modal gallery?
I have a gallery of images, every one of which gets opened in a modal mode on click.我有一个图像库,每个图像都在单击时以模态模式打开。 I want to add an animation effect to each one of them to be shown when we next and previous buttons are clicked.
我想为它们中的每一个添加动画效果,以便在单击下一个和上一个按钮时显示。 I added the animation style to my JS code, however it doesn't work as expected.
我在我的 JS 代码中添加了动画样式,但是它没有按预期工作。 It only works on the first click, not the rest.
它仅适用于第一次点击,而不适用于其余部分。
Here is my code:这是我的代码:
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);
}
}
You could achive it via manipulate animation via property animationName
or via manipulate via class name, that have defined animation.您可以通过通过属性
animationName
操作animationName
或通过定义动画的类名操作来实现它。
In any case you should remove animation when it complete在任何情况下,您都应该在完成后删除动画
function onAnimationEnd(){
/*
// Options 1: Manipulate class name
this.classList.remove('fade')
*/
imgContainer.style.animationName = 'none';
}
imgContainer.addEventListener('animationend', onAnimationEnd);
You could simplify to avoid repetition:您可以简化以避免重复:
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)
}
Or use only one event listener (no need for prev
and next
variables):或者只使用一个事件监听器(不需要
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)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.