模態反轉淡出

Question

我正在測試一個模式，它有一個整齊的小褪色，但是，當你關閉模式時，它只是切出而不是反轉淡出。

我覺得最簡單的方法是在JS內部控制打開和關閉的IF語句。

會適當的符號來實現這一目標是以下幾點：

close.onclick = function() 
{ 
    modal.style.@keyframes.slideIn (and then put the reverse of my numbers here?) 
}; 

原始代碼：

HTML：

<h2>Bottom Modal</h2> 

<button id="button">Click Me</button> 

<div id="modal"> 

<div id="modal-content"> 
    <div id="modal-header"> 
     <span id="close">&times</span> 
     <h2>modal header</h2> 
    </div> 

    <div id="modal-body"> 
     <p>Some text in the modal body</p> 
     <p>Some other text in the modal body</p> 
    </div> 

    <div id="modal-footer"> 
     <h2>modal footer</h2> 
    </div> 

</div><!--modal-content--> 
</div><!--modal div--> 

CSS：

#modal 
{ 
position: fixed; 
z-index:1; 
left:0; 
top: 0; 
width: 100%; 
height: 100%; 
overflow: auto; 
background-color:rgba(0,0,0,0.4); 
-webkit-animation-name: fadeIn; 
-webkit-animation-duration: 0.4s; 
animation-name: fadeIn; 
animation-duration: 0.4s; 
display: none; 
} 

#modal-content 
{ 
position: fixed; 
bottom: 0; 
backgroun-color: #fefefe; 
width: 100%; 
-webkit-animation-name: slideIn; 
-webkit-animation-duration: 0.4s; 
animation-name: slideIn; 
animation-duration: 0.4s; 
} 

#close 
{ 
color: white; 
float: right; 
font-size: 28px; 
font-weight: bold; 
} 

#close:hover, #close:focus 
{ 
color: #000; 
text-decoration: none; 
cursor: pointer; 
} 

#modal-header 
{ 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

#modal-footer 
{ 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

#modal-body 
{ 
padding: 2px 16px; 
background-color: white; 
} 

@-webkit-keyframes slideIn 
{ 
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1} 
} 

@keyframes slideIn 
{ 
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1} 
} 

@-webkit-keyframes fadeIn 
{ 
from {opacity: 0} 
to {opacity: 1} 
} 

@keyframes fadeIn 
{ 
from {opacity: 0} 
to {opacity: 1} 
} 

JS：

var modal = document.getElementById("modal"); 

var button = document.getElementById("button"); 

var close = document.getElementById("close"); 

button.onclick = function() 
{ 
modal.style.display="block"; 
}; 

close.onclick = function() 
{ 
modal.style.display="none"; 
}; 

window.onclick = function(event) 
{ 
if(event.target == modal) 
{ 
    modal.style.display="none"; 
} 
}; 

Answer 1

對於較新的瀏覽器，animation-direction屬性可以解決問題。嘗試將animation-direction: alternate;添加到您的模式的CSS。

Answer 2

應用動畫事件的HTML元素只once..unless你使用一些JavaScript的技巧，比如將觸發動畫：

• 克隆元素

• 刪除原始元素

• 並將帶有動畫類的cloneNode注入到您的文檔中

我寧願使用過渡

在這裏看到演示

NB：我分隔從你的模式容納你的模式內容容器來獲得應有的功效

var modal = document.getElementById("modal"); 
 
var modal_content = document.getElementById("modal-content"); 
 

 
var button = document.getElementById("button"); 
 

 
var close = document.getElementById("close"); 
 

 
button.onclick = function() 
 
{ 
 
modal.classList.remove('modal_trans'); 
 
modal.classList.add('modal_trans'); 
 
modal_content.classList.remove('modal_content'); 
 
modal_content.classList.add('modal_content'); 
 
console.log(modal.classList) 
 
}; 
 

 
close.onclick = function(){ 
 
//modal.classList.remove('reverse'); 
 
modal.classList.remove('modal_trans'); 
 
modal_content.classList.remove('modal_content'); 
 
console.log(modal.classList); 
 
}

#modal 
 
{ 
 
position: fixed; 
 
z-index:1; 
 
left:0; 
 
width: 100%; 
 
height: 100%; 
 
overflow: auto; 
 
background-color:rgba(0,0,0,0.4); 
 
opacity: 0; 
 
transition:all 0.5s; 
 
display:none; 
 
} 
 

 
#modal-content 
 
{ 
 
background-color: #fefefe; 
 
width: 100%; 
 
position:fixed; 
 
bottom:-400px; 
 
transition:all 0.5s; 
 
z-index:2; 
 
} 
 

 
#close 
 
{ 
 
color: white; 
 
float: right; 
 
font-size: 28px; 
 
font-weight: bold; 
 
} 
 

 
#close:hover, #close:focus 
 
{ 
 
color: #000; 
 
text-decoration: none; 
 
cursor: pointer; 
 
} 
 

 
#modal-header 
 
{ 
 
padding: 2px 16px; 
 
background-color: #5cb85c; 
 
color: white; 
 
} 
 

 
#modal-footer 
 
{ 
 
padding: 2px 16px; 
 
background-color: #5cb85c; 
 
color: white; 
 
} 
 

 
#modal-body 
 
{ 
 
padding: 2px 16px; 
 
background-color: white; 
 
} 
 

 
.modal_trans{ 
 
    opacity:1 !important; 
 
    top:0 !important; 
 
    width:100%; 
 
    display:block !important; 
 
} 
 
.modal_content{ 
 
    bottom:0 !important; 
 
    width:100% !important; 
 
    margin:none; 
 
    padding:none; 
 
    text-align: 
 
} 
 
body{ 
 
    margin:auto; 
 
}

<h2>Bottom Modal</h2> 
 

 
<button id="button">Click Me</button> 
 

 
<div id="modal"> 
 
</div><!--modal div--> 
 
<div id="modal-content"> 
 
    <div id="modal-header"> 
 
     <span id="close">&times</span> 
 
     <h2>modal header</h2> 
 
    </div> 
 

 
    <div id="modal-body"> 
 
     <p>Some text in the modal body</p> 
 
     <p>Some other text in the modal body</p> 
 
    </div> 
 

 
    <div id="modal-footer"> 
 
     <h2>modal footer</h2> 
 
    </div> 
 

 
</div><!--modal-content-->