如何为已设置入场动画的modal实现相同效果的反向隐藏动画

1. 调整CSS代码 #

把原来写死在.modal上的动画拆分，避免默认加载就触发动画，同时直接复用现有keyframes实现反向效果，不需要重写动画帧：

/* 基础modal样式，保留你原有的fixed、z-1、宽高、背景等所有样式，只调整动画相关配置 */
.modal {
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
/* 入场动画类 */
.modal-show {
  animation-name: myAnim;
  animation-direction: normal;
}
/* 退场动画类，仅修改动画方向为反向，复用同一套关键帧 */
.modal-hide {
  animation-name: myAnim;
  animation-direction: reverse;
}
@keyframes myAnim {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

2. 编写JS交互逻辑 #

核心注意点：退场时不能直接加hidden类，需要等反向动画执行完毕后再隐藏元素，否则动画会被直接打断不生效：

const modal = document.getElementById('myModal');
const toggleBtn = document.getElementById('myBtn');
// 初始状态和你的默认类保持一致，默认有hidden类所以初始为隐藏状态
let isModalVisible = false;

toggleBtn.addEventListener('click', () => {
  if (isModalVisible) {
    // 触发退场逻辑
    modal.classList.add('modal-hide');
    // 监听动画结束事件，执行完再隐藏元素
    modal.addEventListener('animationend', () => {
      modal.classList.add('hidden');
      // 清理动画类，避免下次入场动画冲突
      modal.classList.remove('modal-show', 'modal-hide');
      isModalVisible = false;
    }, { once: true }) // 配置once避免重复绑定事件
  } else {
    // 触发入场逻辑
    modal.classList.remove('hidden');
    modal.classList.add('modal-show');
    isModalVisible = true;
  }
})

可选优化 #

如果要避免动画执行过程中重复点击按钮导致逻辑混乱，可以新增isAnimating状态锁，动画执行过程中忽略按钮点击即可。

内容的提问来源于stack exchange，提问作者Fayakon