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?

Related but not an exact dupe: stackoverflow.com/questions/27904886/… — TylerH
– TylerH, Commented Aug 15, 2016 at 15:53

iamalismith · Accepted Answer · 2016-08-15 15:51:57Z

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");    
}

pr0gramista · Accepted Answer · 2016-08-15 15:49:22Z

0

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

answered Aug 15, 2016 at 15:49

pr0gramista

9,0783 gold badges41 silver badges52 bronze badges

Collectives™ on Stack Overflow

Css3/Javascript transition doesn't work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related