JavaScript is changing image before opacity transition is finished

Question

I have a page full of images that when you click anyone, that image is shown full size in center of page with forward/back arrows. I want the big image to fadein when it is clicked by transitioning the opacity which I have done successfully.

My problem now is when you click the forward or back arrow to scroll thru the images the JavaScript renders next image before the opacity transition can take place ( I can't use jQuery for this). I've looked here and googled different phrases but can't seem to get an answer that works. Most writeups deal with only an initial opacity transition and don't take into account what if you wanted to show multiple images one after the other.

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

Forward/back arrow click

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.

        }
    });

Any help on how to have the images fadein/out on arrow click would be much appreciated.

Answer 1

Since you aren't using jQuery, what you may have to do is something like this. Where you have the fadeOut("popup") being called:

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

...using a transitionend event is a better way, but his will get you up and running quickly.

hope this helps?