Css3/Javascript 转换不起作用答案

【问题标题】：Css3/Javascript transition doesn't workCss3/Javascript 转换不起作用
【发布时间】：2016-08-15 23:51:57
【问题描述】：

我正在尝试制作一个带有动画的模态框，当它出现和消失时。
我尝试使用 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;
}

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

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

【问题讨论】：

modal的html结构是什么？
我用html结构编辑过
相关但不完全是骗局：stackoverflow.com/questions/27904886/…

标签： javascript html css

【解决方案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，先设置modal为可见，再添加transition类：

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

【讨论】：

【解决方案2】：

改变display 属性不会让浏览器做动画。它立即起作用。即使使用transition: display 也无济于事。

【讨论】：