如何实现CSS反向动画？菜单关闭动画无法正常运行

你的核心问题是代码里完全没用到定义好的MenuClose类，只是在点击时切换MenuOpen类，自然触发不了关闭动画。下面是具体的修复方案：

问题分析 #

当前点击逻辑只是简单切换MenuOpen类：打开时添加该类触发正向动画，但关闭时只是移除MenuOpen，菜单会立刻回到初始状态，不会执行MenuClose的反向动画。

修复步骤 #

1. 修改JavaScript逻辑 #

需要判断菜单当前状态，针对性添加/移除动画类，同时处理动画结束后的状态重置：

function showMenu() {
  const el = document.getElementById("MenuContainer");
  const isOpen = el.classList.contains('MenuOpen');
  
  if (isOpen) {
    // 关闭菜单：移除打开类，添加关闭类
    el.classList.remove('MenuOpen');
    el.classList.add('MenuClose');
    // 动画结束后清除关闭类，避免后续冲突
    el.addEventListener('animationend', function handleCloseEnd() {
      el.classList.remove('MenuClose');
      el.removeEventListener('animationend', handleCloseEnd);
    });
  } else {
    // 打开菜单：移除关闭类，添加打开类
    el.classList.remove('MenuClose');
    el.classList.add('MenuOpen');
  }
}

2. 优化CSS（更直观可控） #

拆分独立的打开/关闭动画，比依赖reverse更可靠，也能灵活控制不同阶段的时长：

#MenuContainer {
  height: 0px;
  left: 10px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  position: relative;
  top: 20px;
  width: 0px;
  /* 添加过渡降级，防止动画失效时的生硬切换 */
  transition: height 0.2s, width 0.2s;
}

.MenuOpen {
  animation: MenuOpenAnim 4s forwards;
}

.MenuClose {
  animation: MenuCloseAnim 2s forwards;
}

@keyframes MenuOpenAnim {
  from {
    height: 0px;
    width: 0px;
  }
  to {
    height: 100px;
    width: 300px;
  }
}

@keyframes MenuCloseAnim {
  from {
    height: 100px;
    width: 300px;
  }
  to {
    height: 0px;
    width: 0px;
  }
}

3. HTML保持不变 #

<input id="MenuButton" type="button" value="Menu" onclick="showMenu();" title="Menu" />
<div id="MenuContainer"></div>

关键说明 #

• 必须通过切换对应动画类触发不同状态的动画，不能只依赖单个类的toggle
• 监听animationend事件是为了在关闭动画完成后清除MenuClose类，避免下次打开时的状态冲突
• 拆分独立动画比使用animation-direction: reverse更直观，兼容性也更好

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