CSS Animation timing issue on modal close

January 31, 2023

I am using a w3Schools tutorial for a modal. I would like to run an animation after the user clicks the close button. I am using a blind animation and have it working on open but would like the reverse on close.

Should I be using Javascript to change the classes inline? I’ve experimented with that but the animation doesn’t have time to run because I’m closing the modal with display:hidden right after the animation call, so it’s being executed before the animation has time to complete.

Here is my html. I have the animation class inline and the only thing I can think of is to switch the out animation with javascript:

<div id="modal-one" class="modal">
  <div class="modal-content modal-parent blind-content in origin-middle">
    <div class="modal-header">
      <h2>header</h2>
      <span class="modal-close"></span>
    </div>
    content here
  </div>
</div>

How can I get the blind effect to run on open and close?

>Solution :

Next time please provide a link to the tutorial (or some such).

You could use javascript.

change your html to…

<div id="modal-one" class="modal">
  <div class="modal-content modal-parent blind-content in origin-middle">
    <div class="modal-header">
      <h2>header</h2>
      <span class="modal-close d-none"></span>
      <span class="model-close-dummy"></span>
    </div>
    content here
  </div>
</div>

then add javascript

let modal = document.querySelector("#modal-one");
let modal_close_dummy = modal.querySelector(".modal-close-dummy")
let modal_close = modal.querySelector(".modal-close")

modal_close_dummy.addEventListener("click", function () {
   runClosingAnimation();//run animation - do what you need to do
   setTimeout(function(){
      modal_close.click(); //programatically click the actual close button after 500ms
   }, 500) //500 time in miliseconds to wait, before the stuff inside setTimeout runs
});

Hope this helps.