CSS/Javascript菜单动画故障：点击关闭无反应且图标不切换

核心结论 #

用CSS transition 实现这种菜单显示/隐藏的切换远比animation更简单高效。animation更适合复杂的多阶段序列动画，而transition专门针对元素在不同CSS状态间的平滑过渡，完全匹配菜单滑入滑出的需求。

原代码的问题分析 #

• 关闭逻辑粗暴：点击关闭时直接设置display:none，跳过动画过程，导致看不到滑出效果
• 缺少反向动画：仅定义了菜单进入的动画，没有对应的退出动画逻辑
• 图标切换无样式支撑：代码中给.burger和.burgers添加了rotate/rotate2类，但未编写对应的CSS样式，所以图标不会产生变化

修复后的完整代码 #

HTML #

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<div class="menu">
  <div class="burger">☰</div>
  <div class="burgers hidden">✕</div>
</div>
<div class="show pt-20 min-w-screen text-center min-h-screen">
  <a href="#"><span>Home</span></a>
  <a href="#"><span>About</span></a>
  <a href="#"><span>Work</span></a>
  <a href="#"><span>Contact</span></a>
</div>

CSS #

.show {
  opacity: 0;
  margin-right: 190px;
  /* 定义需要过渡的属性及动画参数 */
  transition: all 0.3s ease-out;
}

/* 菜单激活状态的样式 */
.show.active {
  opacity: 1;
  margin-right: 89px;
}

.burger, .burgers {
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
}

/* 控制图标显示/隐藏 */
.menu .hidden {
  display: none;
}

JavaScript #

const menuToggle = document.querySelector(".menu");
const menuContent = document.querySelector(".show");
const burgerIcon = document.querySelector(".burger");
const closeIcon = document.querySelector(".burgers");

menuToggle.addEventListener("click", () => {
  // 切换菜单的激活状态，自动触发transition动画
  menuContent.classList.toggle("active");
  
  // 切换汉堡/叉号图标显示
  burgerIcon.classList.toggle("hidden");
  closeIcon.classList.toggle("hidden");
});

代码说明 #

• 用active类标记菜单的显示状态，transition会自动处理初始状态与激活状态间的双向过渡，无需手动控制动画播放
• 汉堡与叉号通过hidden类控制显示/隐藏，逻辑直观；如果需要旋转切换效果，只需给对应类添加transform: rotate(90deg)之类的样式即可
• 移除了繁琐的animation-play-state控制，代码逻辑更清晰，后续维护成本更低

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