html - CSS 动画在动画输入后输出

Question

当显示时，我已经在 HTML 元素的属性中设置了动画，我希望反向有相同的动画，当单击按钮时它应该以相同的动画隐藏。我怎样才能做到这一点。

正在运行的“动画”:

.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>

我正在使用 JS 显示/隐藏模式。我怎样才能隐藏具有相同动画的模态。

Answer 1

创建两个类，一个用于使模态出现，另一个用于使其消失，

出现类别

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

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

}

使模式消失的类

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

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

}

现在只需在按钮切换时使用 Javascript 将此类添加到模式的 classlist

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