Add SlideDown effect on modal close 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">&times;</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?

Seems like you should use a transition instead of keyframes animation, but can't tell until you create a [mcve]. [Have a look at this answer](https://stackoverflow.com/questions/20586143/css-animation-vs-transition), it explains the difference between transitions and keyframes — Pete, Sep 26 '18 at 13:35

score 0 · Accepted Answer · answered Sep 26 '18 at 14:35

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">&times;</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>

I notice that `show` is happened as expected, but `hiding` is to match quickier than `show` — , Sep 26 '18 at 15:00
That's because your animation is 0.4seconds and you move your banner 300px. The show is exactly the same speed as the hide — Pete, Sep 26 '18 at 15:01

Add SlideDown effect on modal close CSS

1 Answers1