Css3/Javascript转换不工作

Css3/Javascript transition doesn't work

本文关键字：工作 转换 Javascript Css3      更新时间：2023-09-26

我试图使一个动画模态框，当它出现和消失。
我尝试使用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";
}

这使模态出现和消失，但没有过渡。我做错了什么?

运行的任何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");    
}

更改display属性将不允许浏览器执行动画。它立竿见影。即使使用transition: display也无济于事。

相关文章：