Modal Reverse Fade

Question

Я тестировал модальный, который немного опрятный, но когда вы закрываете модальный, он просто вырезает, а не меняет затухание.

Я понял, что самый простой способ добиться этого - это оператор IF в JS, который контролирует открывание и закрытие.

бы правильное обозначение для достижения этой цели будут следующие:

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 с классом анимации обратно в ваш документ

Я предпочел бы использовать TRANSITION

См демонстрационные здесь

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-->