能否使用回调函数延迟执行display="none"属性设置？

延迟设置display属性的思路完全可行，你用setTimeout延迟执行隐藏逻辑的方向是对的，只是现有代码存在几个细节问题，修复后就能正常实现带动画的下拉菜单效果。

核心原理 #

display是不可动画属性，浏览器在同一事件循环中处理样式修改时，会优先计算display这类影响文档流的属性，如果直接在触发收起动画的同一帧设置display:none，元素会直接从渲染树移除，动画根本不会被执行。只要把display:none的修改时机挪到动画执行完成之后，就能避开这个问题。

现有代码的问题 #

• 初始状态判断失效：CSS中默认给.list ul设置了display: block，第一次触发点击时，元素内联样式上没有display属性，dis.style.display == "none"的判断不成立，会直接走收起逻辑。
• 快速点击异常：如果在动画播放过程中重复点击按钮，之前排队的setTimeout不会被清除，会出现动画中途元素被隐藏、状态错乱的问题。
• 硬编码延迟时间维护成本高：手动写死2000ms延迟和动画时长对齐，后续如果修改动画时长，必须同步修改JS中的延迟数值，很容易出现时间不匹配的问题。

优化实现方案 #

优先用原生animationend事件代替硬编码setTimeout，动画播放完成后会自动触发回调执行隐藏逻辑，不需要手动同步时长，稳定性更高。

优化后JS代码 #

const menu = document.querySelector(".litems");
const toggleBtn = document.querySelector("button");
// 初始状态设为隐藏
menu.style.display = "none";

toggleBtn.addEventListener("click", () => {
  if (menu.style.display === "none") {
    // 展开：先切换显示状态，强制浏览器重排后再触发动画
    menu.style.display = "block";
    void menu.offsetWidth; // 触发重排，避免浏览器合并样式修改导致动画失效
    menu.style.animation = "up 2s ease-in forwards";
  } else {
    // 收起：先播放动画，动画结束后再隐藏
    menu.style.animation = "down 2s ease-in forwards";
    const onAnimationEnd = () => {
      menu.style.display = "none";
      menu.removeEventListener("animationend", onAnimationEnd);
    }
    menu.addEventListener("animationend", onAnimationEnd);
  }
})

优化后CSS代码 #

.list ul {
  background: orchid;
  position: absolute;
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  top: 40px; /* 对齐按钮底部位置，可按需调整 */
}

@keyframes up {
  0% {
    top: 0;
    opacity: 0;
    background: white;
  }
  100% {
    top: 40px;
    opacity: 1;
    background: orange;
  }
}

@keyframes down {
  0% {
    top: 40px;
    opacity: 1;
    background: orange;
  }
  100% {
    top: 0;
    opacity: 0;
    background: white;
  }
}

HTML结构 #

<button>Click it to toggle</button>
<div class="list">
  <ul class="litems">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

其他可选实现思路 #

如果不需要兼容IE11及更老旧的浏览器，可以完全放弃用display控制显隐：

• 隐藏状态用visibility: hidden + pointer-events: none + opacity: 0实现
• 显示状态用visibility: visible + pointer-events: auto + opacity: 1实现
  这几个属性都支持CSS过渡/动画，不需要写JS延迟逻辑，代码更简洁。

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