CSS animation out after animation in-CodePudding

i have set animation in property on HTML element when it is displayed, i want same animation on reverse, when button is clicked it should hide with same animation. how can i achieve that.

"Animation in" which is working:

.modal{
animation: myAnim 1s ease 0s 1 normal forwards;
}
@keyframes  myAnim {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}

HTML:

<div id="myModal"  class="modal fixed hidden z-1 w-full h-full bg-red-100 h-screen ">

<button  id="myBtn" class=" p-2 bg-yellow-400 rounded m-4 absolute right-0  text-xs font-bold ">
HIDE/SHOW..
 </button>

i am showing/hidding modal using JS. how can i hide modal with same animation.

CodePudding user response：

Create two classes, one for making the modal appear and another for making it disappear,

Class for appearing

.modal-appr{
animation: appr 1s ease 0s 1 normal forwards;
}
@keyframes  appr {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}

Class to make the modal disappear

.modal-disappr{
animation: disappr 1s ease 0s 1 normal forwards;
}
@keyframes  disappr {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50px);
  }

}

now just use Javascript to add this classes to the modal's classlist when the button toggles

const btn = document.querySelector('mybtn');
const modal = document.querySelector('#myModal');

btn.addEventListener ('click', function toggleClass () {
    if(modal.classList.contains('appr')) {
        modal.classList.add('disappr');
        modal.classList.remove('appr');
    } else {
        modal.classList.add('appr');
        modal.classList.remove('disappr');
    }
})

CodePudding user response：

You can achieve this by using toggle class and transition instead.

let btn = document.getElementById('model_btn');
let model = document.getElementById('model');
btn.addEventListener('click', function(){
  model.classList.toggle('show');
})

/* Styling the markup */
#model{
  width: 200px;
  height: 100px;
  background-color: yellow;
  padding: 20px;
  margin-bottom: 20px;
}
#model_btn{
  border: none;
  background-color: green;
  padding: 10px;
  color: white;
  cursor: pointer;
}

/* Showing and hiding animation with transition */

#model{
  position: relative;
  visibility: none;
  opacity: 0;
  top: 0;
  left: 0;
  transform: translateX(-50px);
  transition: all 1s ease;
}
#model.show{
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

<div id="model">
  Content
</div>
<button id="model_btn">Show/Hide Model</button>

Animation / Key-frame approach.

let btn = document.getElementById('model_btn');
let model = document.getElementById('model');
btn.addEventListener('click', function(){
  model.classList.toggle('show');
})

/* Styling the markup */
#model{
  width: 200px;
  height: 100px;
  background-color: yellow;
  padding: 20px;
  margin-bottom: 20px;
  visibility: none;
  opacity: 0;
  transform: translateX(-50px);
}
#model_btn{
  border: none;
  background-color: green;
  padding: 10px;
  color: white;
  cursor: pointer;
}

.show{
  animation: myAnim 1s ease 0s 1 normal forwards;
}
@keyframes  myAnim {
  0% {
    visibility: none;
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
}

<div id="model">
  Content
</div>
<button id="model_btn">Show/Hide Model</button>