Css3/Javascript transition doesn't work

Question

I'm trying to make a modal box with an animation when it appear and disappear.
I tried using css3 transition.

HTML

<div id="modal" class="modal">
<div id="modalcontent" class="modal-content" >
    <div class="modal-header">
        <span class="close" onclick="closeList()" >x</span>
        <h2>Lista File</h2>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
        <span id="sendlistButt" class="send" onclick="sendList()" >salva</span>
    </div>
</div>

CSS

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #444;
    width: 650px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    top: -300px;
    opacity: 0;
    -webkit-transition: top 5s, opacity 5s ; /* Safari */
    transition: top 5s, opacity 5s ;
}

.animatetop {
    top: 0;
    opacity: 1;
}

JS

function close() {
    document.getElementById("modal").style.display="none";
    document.getElementById("modalcontent").classList.remove("animatetop");
}

function open() {
    document.getElementById("modalcontent").classList.add("animatetop");
    document.getElementById("modal").style.display="block";
}

This make the modal appear and disappear but without transition. What am i doing wrong?

Answer 1

Any css transitions that run depend on the element being visible with display:block or similar.

By calling document.getElementById("modal").style.display="none"; at the start of your close() function you instantly set the entire modal to be completely hidden, so the transition on the modalcontent has no effect.

Likewise in the open() function, the transition class is applied but the element is hidden by display:none so the transition does not run.

You should try to have the transition run, then after a delay set the modal to be hidden.

function close() {
    document.getElementById("modalcontent").classList.remove("animatetop");
    window.setTimeout(function(){
        document.getElementById("modal").style.display="none"; //hide modal after 5s delay
    }, 5000);
}

and for the open , set the modal visible first, then add the transition class:

function open() {
    document.getElementById("modal").style.display="block";    
    document.getElementById("modalcontent").classList.add("animatetop");    
}

Answer 2

Changing display property will not let browser do the animation. It works instantly. Even using transition: display will not help.