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()函數開始時，您立即將整個模態設置為完全隱藏，因此模態內容上的過渡無效。

同樣在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也無濟於事。