0

How to fade in my Pop-Up when using display: none and display: block in javascript?

Also, I want to know how I am supposed to use it for the picture slider. I want the PopUp to fade in and out when I close it and I want a transition between the pictures when I am clicking to the next photo.

The "modal" is the PopUp and "mySlides" are the photos.

var slideIndex;
var mySlides;

function openModal(modalName, myModalSlides) {
    document.getElementById(modalName).style.display = "block";
    document.getElementById(modalName).fadeIn();  //???
    mySlides = document.getElementById(myModalSlides);
}

function closeModal(modalName) {
    document.getElementById(modalName).style.display = "none"; 
    document.getElementById(modalName).fadeOut(); //???
    mySlides = null; 
}

function plusSlides(index) {
    showSlides(slideIndex += index);
    Element.style.opacity = 1;
}

function currentSlide(index) {
    showSlides(slideIndex = index);
}


function showSlides(index) {
    var i;
    if (index > mySlides.childElementCount) { slideIndex = 1 } 
    for (i = 0; i < mySlides.childElementCount; i++) { 
        mySlides.children[i].style.display = "none";
    }
    mySlides.children[slideIndex - 1].style.display = "block";
}
artanik
  • 2,599
  • 15
  • 24
semias
  • 1
  • 1
  • You cannot transition `display` since it is not animatable, and requires moving an element in and out of flow. Look into this, might be helpful: [Transitioning Hidden Elements](https://cloudfour.com/thinks/transitioning-hidden-elements/) – chriskirknielsen Feb 11 '20 at 22:35
  • You can use CSS transitions to achieve this effect. Next, you need transitionend event. That's how you can "toggle" display property. https://jsbin.com/vifevefuca/1/edit?html,css,js,output – artanik Feb 11 '20 at 22:56

0 Answers0