Css3/Javascript переход не работает

Question

Я пытаюсь сделать модальную коробку с анимацией, когда она появится и исчезнет.
Я пробовал использовать переход css3.

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

Это делает модальный появляются и исчезают, но без перехода , Что я делаю неправильно?

Answer 1

Любые css-переходы, которые работают, зависят от видимого элемента с display:block или аналогичным.

Позвонив document.getElementById("modal").style.display="none"; в начале вашей close() функции вы мгновенно установить все режимные быть полностью скрыты, поэтому переход на modalcontent не имеет никакого эффекта.

Аналогично в функции open() применяется класс перехода, но элемент скрыт display:none, поэтому переход не выполняется.

Вы должны попытаться выполнить переход, а затем после задержки установить модальный, который будет скрыт.

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

и для open, установите модальный видимый, а затем добавить класс перехода:

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

Answer 2

Изменение display свойство не позволит браузеру делать анимацию. Он работает мгновенно. Даже использование transition: display не поможет.