![](/img/trans.png)
[英]How can I add fade effect to this jQuery Image Swap Gallery
[英]In JavaScript, how can I add animation effect on every image in a modal gallery?
我有一个图像库,每个图像都在单击时以模态模式打开。 我想为它们中的每一个添加动画效果,以便在单击下一个和上一个按钮时显示。 我在我的 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);
}
}
您可以通过通过属性animationName
操作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
变量):
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.