菜单反向动画实现求助：点击按钮第二次触发退出动画

咱们先抓核心问题：你能做好显示动画，但退出时直接跳没了，大概率是隐藏菜单时直接移除了动画类或者设置了display: none，浏览器没来得及渲染动画就完成了状态切换。下面给你一套和现有逻辑兼容的修复方案：

一、先调整CSS，给反向动画留触发条件 #

假设你现在是靠给菜单加active类触发显示动画，那咱们用过渡动画（transition）来实现自动反向，不用额外写反向关键帧：

/* 菜单默认状态：隐藏+初始动画状态 */
.dropdown-meniu .menu-content {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease; /* 和显示动画时长保持一致 */
  pointer-events: none; /* 隐藏时不让菜单响应点击 */
}

/* 显示动画：添加active类时的状态 */
.dropdown-meniu.active .menu-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

用transition的好处是，只要移除active类，元素会自动从显示状态平滑过渡回默认状态，完美实现反向动画。

二、修改JS逻辑，等动画完成再收尾 #

如果你的myFunction是直接切换active类，但菜单有display: none的设置，那得调整成这样：

function myFunction(button) {
  const dropdownMenu = button.closest('.dropdown-meniu');
  const menuContent = dropdownMenu.querySelector('.menu-content');
  
  // 保留你原来的汉堡按钮动画逻辑
  button.classList.toggle('change');
  
  if (dropdownMenu.classList.contains('active')) {
    // 退出流程：先移除active类触发反向动画，动画结束后再处理隐藏
    dropdownMenu.classList.remove('active');
    // 监听动画结束事件，防止重复触发
    const handleTransitionEnd = () => {
      // 如果你需要彻底隐藏菜单（比如设display:none），就在这加
      // menuContent.style.display = 'none';
      menuContent.removeEventListener('transitionend', handleTransitionEnd);
    };
    menuContent.addEventListener('transitionend', handleTransitionEnd);
  } else {
    // 显示流程：先确保元素可见，再加active类触发动画
    // 如果之前设了display:none，先恢复
    // menuContent.style.display = 'block';
    dropdownMenu.classList.add('active');
  }
}

要是你用的是@keyframes动画，这么改： #

如果显示动画是用关键帧写的，那得单独加一个反向关键帧，再配合JS监听动画结束：

/* 显示动画关键帧 */
@keyframes slideIn {
  from { opacity:0; transform: translateY(-20px); }
  to { opacity:1; transform: translateY(0); }
}

/* 退出动画关键帧（完全反向） */
@keyframes slideOut {
  from { opacity:1; transform: translateY(0); }
  to { opacity:0; transform: translateY(-20px); }
}

.dropdown-meniu.active .menu-content {
  animation: slideIn 0.3s forwards;
}

.dropdown-meniu.closing .menu-content {
  animation: slideOut 0.3s forwards;
}

对应的JS：

function myFunction(button) {
  const dropdownMenu = button.closest('.dropdown-meniu');
  const menuContent = dropdownMenu.querySelector('.menu-content');
  
  button.classList.toggle('change');
  
  if (dropdownMenu.classList.contains('active')) {
    // 先加closing类触发退出动画，同时移除active类
    dropdownMenu.classList.remove('active');
    dropdownMenu.classList.add('closing');
    
    const handleAnimationEnd = () => {
      dropdownMenu.classList.remove('closing');
      // 可选：彻底隐藏菜单
      // menuContent.style.display = 'none';
      menuContent.removeEventListener('animationend', handleAnimationEnd);
    };
    menuContent.addEventListener('animationend', handleAnimationEnd);
  } else {
    dropdownMenu.classList.add('active');
    // 显示前恢复可见性
    // menuContent.style.display = 'block';
  }
}

三、排查几个常见坑点 #

• 别在移除动画类的同时直接设display: none，必须等动画结束事件触发后再做，不然浏览器会跳过动画
• 检查菜单默认状态有没有display: none：有的话显示前要先改成block/flex，退出时等动画结束再改回去
• 汉堡按钮的动画（bar1/bar2/bar3的变换）要和菜单动画时长同步，保持视觉统一

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