如何使用CSS Keyframe动画为下拉菜单添加关闭效果

问题根因 #

• display属性是不可动画属性，display: none和display: block之间的切换是瞬间跳变，浏览器不会等待动画播放完成再切换状态，这是最初Keyframe方案关闭时直接消失的核心原因
• 仅使用visibility隐藏元素时，元素依然存在于文档流中，会占据布局空间、拦截点击交互，也就是遇到的「幽灵容器」遮挡问题
• Keyframe更适合单向、单次播放的动画效果，处理下拉菜单这种需要双向切换（开/关）的状态过渡时，需要手动控制动画播放方向、状态保持逻辑，纯CSS下很容易出现状态不同步的问题

纯CSS无JS实现方案 #

用transition多属性联动的方案比Keyframe更适配这类场景，不需要写两套关键帧，浏览器会自动根据状态变化执行正向/反向过渡，从根源避免关闭动画失效问题。

核心逻辑：用可动画的尺寸属性控制元素占位，配合visibility过渡延迟、pointer-events控制交互状态，彻底解决跳变和幽灵遮挡问题。

参考实现代码：

/* 下拉菜单默认收起态 */
.dropdown-menu {
  /* 收起时高度为0，不占布局空间 */
  height: 0;
  /* 初始视觉隐藏 */
  visibility: hidden;
  /* 隐藏状态下不响应任何鼠标交互，彻底解决遮挡问题 */
  pointer-events: none;
  /* 裁切溢出内容，避免收起时菜单内容漏出 */
  overflow: hidden;
  /* 配置过渡：收起时等高度、透明度动画走完，再切换visibility */
  transition: 
    height 0.25s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
  /* 可选：增加透明度变化，动画更自然 */
  opacity: 0;
}

/* 下拉触发态（hover、聚焦都能触发，兼顾可访问性） */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  /* 展开高度，如果是动态内容可以换成max-height，设置一个比实际最大高度大的值即可，比如max-height: 400px */
  height: 180px;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  /* 展开时visibility立刻切换为可见，不需要延迟 */
  transition: 
    height 0.25s ease,
    opacity 0.25s ease,
    visibility 0s linear 0s;
}

关键注意点 #

• 永远不要尝试给display属性加过渡/动画，所有现代浏览器都不支持该属性的插值计算，状态切换永远是瞬间跳变
• 动态高度场景不要写死height，替换为max-height即可，给一个足够容纳菜单内容的固定值，动画效果和固定高度无明显差异
• 如果坚持要用Keyframe实现，必须移除所有display状态切换，同时给关闭动画配置对应的延迟和animation-fill-mode: forwards保持结束状态，但整体维护成本远高于transition方案，不推荐

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