JavaScript 在不透明度转换完成之前更改图像

Question

我有一个充满图像的页面，当您单击任何人时，该图像会在页面中心以全尺寸显示，并带有前进/后退箭头。我希望通过转换我已经成功完成的不透明度来单击大图像时淡入。

我现在的问题是，当您单击向前或向后箭头滚动浏览图像时，JavaScript 会在不透明度转换发生之前渲染下一个图像(我不能为此使用 jQuery)。我看过这里并用谷歌搜索了不同的短语，但似乎无法得到有效的答案。大多数文章只处理初始的不透明度过渡，并且没有考虑如果您想一个接一个地显示多个图像该怎么办。

HTML

<img id="popup" class="Absolute_Center is_Image" alt="Girl Popup" data-picture="">

JS

初始化

var oimgPopup = document.getElementById("popup");

function fadeOut(el) {
    var elem = document.getElementById(el);
    elem.style.transition = "opacity 2s linear 0s";
    elem.style.opacity = 0;
}

function fadeIn(el) {
    var elem = document.getElementById(el);
    console.log(elem);
    elem.style.transition = "opacity 2s linear 0s";
    elem.style.opacity = 1;
}
/* =============================================================================
   ============ add event listener for Large Popup of       ====================
   ============ image when small image on page is clicked   ====================
   ============================================================================= 
 */
oel.addEventListener("click", function(e) {
    var imgClicked = e.target.src;
    var imgNumber = e.target.dataset.picture; // Find the number of the picture that was clicked by looking in the data- variable
    oimgPopup.setAttribute("src", imgClicked);
    oimgPopup.setAttribute("data-picture", imgNumber); // Set Picture number via the data-picture attribute for #popup
    oimgPopup.style.transition = "opacity 2s" // Set Opacity transition effect
    fadeIn("popup"); // Now Picture will fadein
    var oallImages = document.images;
    for (var i = 0; i < oallImages.length; i++) {
        if (oallImages[i].classList.contains("arrow")) {
            oallImages[i].classList.toggle("arrow");
            oallImages[i].style.zIndex = "9";
        }
    }
}); // End Popup Event

单击前进/后退箭头

ofwdArrow.addEventListener("click",
    function(e) {
        fadeOut("popup"); // Want current image to transition out. But JS changes it too fast.
        var currentPopup = oimgPopup.dataset.picture;
        var pageImages = document.querySelectorAll("div#masonry img");

        currentPopup = +currentPopup + 1; /* +y unary operation coerces y to a number.Concatenation changes y back to string type. */

        if (currentPopup <= pageImages.length) {

            var o_nextImage = document.querySelector('[data-picture ="' + currentPopup + '"]');
            var nextSrc = o_nextImage.getAttribute("src");
            oimgPopup.setAttribute("src", nextSrc);
            oimgPopup.setAttribute("data-picture", currentPopup);
            fadeIn("popup"); // Not even seen bacause script has already changed image.

        }
    });

任何有关如何在单击箭头时使图像淡入/淡出的帮助将不胜感激。

Answer 1

由于您没有使用 jQuery，因此您可能需要做这样的事情。在调用 fadeOut("popup") 的地方:

fadeOut("popup");
//set a timeout to wait 2 seconds before incrementing the currentPopup 
setTimeout(function(){
 currentPopup = +currentPopup + 1;
}, 2000);

...使用transitionend事件是一个更好的方法，但他会让你快速启动并运行。

希望这有帮助吗？