CSS animation out after animation in - html

Question

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.

Answer 1

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');
}
})

Answer 2

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>