Add SlideDown effect on modal close CSS - css

Question

I have this style for my modal and I wonder where and how do I reverse slideUp effect on modal close.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
-webkit-animation: slideIn 0.4s;
animation: slideIn 0.4s;
}
#-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}
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
<div id="myModal" class="modal">
<span class="close">×</span>
<p>Some content here</p>
</div>
Basically I want to modal closing same way it is showing (same animation on modal open and modal close, pure CSS only), can someone help me with that?

Answer 1

I would use a transition that is applied when you add and remove a class:
.modal {
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
transition: opacity 0.4s, bottom 0.4s; /* animate these properties */
opacity: 1; /* open state is shown */
}
.modal.closed {
opacity: 0; /* close state is hidden and off screen */
bottom: -300px;
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
<div id="myModal" class="modal closed">
<span class="close">×</span>
<p>Some content here</p>
</div>
<div id="myBtn">click me</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(e) {
e.stopPropagation(); /* stop event bubbling up to window */
modal.classList.remove("closed");
}
span.onclick = function() {
modal.classList.add("closed");
}
window.onclick = function(event) {
if (event.target != modal) {
modal.classList.add("closed");
}
}
</script>