JavaScript在不透明度过渡完成之前改变图像

Question

我有一个充满图像的页面，当你点击任何人，该图像显示在页面的中心与前进/后退箭头全尺寸。我希望通过过渡不透明度点击大图时，它会褪色，我已经成功地做到了。

我现在的问题是，当你点击前进或后退箭头滚动图像JavaScript渲染下一个图像之前，不透明度的过渡可以发生(我不能使用jQuery)。我看了这里，用谷歌搜索了不同的短语，但似乎找不到一个有效的答案。大多数的文字只处理一个初始的不透明度过渡，而没有考虑到如果你想一个接一个地显示多个图像。

HTML

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

JS

Init

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");
//set a timeout to wait 2 seconds before incrementing the currentPopup 
setTimeout(function(){
 currentPopup = +currentPopup + 1;
}, 2000);

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

希望这有帮助?