2016-08-15 8 views
0

私はモーダルボックスを表示して消えるときにそれを作ろうとしています。
私は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; 
} 

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

このモーダルはなく、移行せずに現れたり消えたりします。 何が間違っていますか?

+0

モーダルのHTML構造は何ですか? – iamalismith

+0

私はhtml構造で編集しました –

+0

関連していますが正確には見つかりません:http://stackoverflow.com/questions/27904886/can-i-apply-a-css-transition-to-the-overflow-property/27905043# 27905043 – TylerH

答えて

2

実行されるCSS遷移は、表示される要素に応じてdisplay:blockなどとなります。あなたは即座に完全に隠されたように、全体モーダルに設定されているので、modalcontentに移行しても効果はありませんあなたの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");  
} 
+0

ありがとう、これは私の多くを助けた。解決済み! –

0

displayプロパティを変更すると、ブラウザはアニメーションを実行できません。それは即座に動作します。 transition: displayを使用しても役立ちません。

+0

どうすれば解決できますか? –

関連する問題