Css3/Javascript转换不起作用

我试图使一个模式框与动画时，它出现和消失。
我试过使用css3转换。

HTMLCss3/Javascript转换不起作用

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

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

来源

2016-08-15 Elia Lotti

什么是模态的HTML结构？ – iamalismith

我已经编辑了html结构 –

相关但不是确切的愚蠢：http://stackoverflow.com/questions/27904886/can-i-apply-a-css-transition-to-the-overflow-property/27905043# 27905043 – TylerH

任何运行的css转换都依赖于display:block或类似的可见元素。

通过在close()函数开始时调用 document.getElementById("modal").style.display="none";您立即将整个模态设置为完全隐藏，因此模态内容的过渡不起作用。

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

来源

2016-08-15 15:51:57 iamalismith

谢谢，这对我帮助很大。解决！ –

更改display属性不会让浏览器执行动画。它即刻起作用。即使使用transition: display也无济于事。

来源

2016-08-15 15:49:22 pr0gramist

那么，我该如何解决？ –

Css3/Javascript转换不起作用

回答

相关问题