HTML下拉菜单平滑过渡效果的实现技巧-html教程-PHP中文网

max-height + overflow: hidden + transition 是最可靠兼容的下拉菜单动画方案，因 display 为离散属性无法插值，故 display 切换无过渡；需设具体 max-height 值、保持文档流、配合 focus-within 和 checkbox 实现可访问性。

html下拉菜单平滑过渡效果的实现技巧

直接用 max-height + overflow: hidden + transition 是最可靠、最兼容的方案，其他方式（比如 display 切换或纯 transform）要么动画失效，要么不推挤下方内容。

为什么 `display: none` 不能做平滑过渡

因为 display 是离散属性，没有中间状态：浏览器在 none 和 block 之间无法插值，transition 完全不触发。你看到的“闪现”，其实是 CSS 动画被跳过后的强制重绘结果。

常见错误写法：

/* ❌ 这段不会产生任何过渡效果 */
.dropdown-content {
  display: none;
  transition: all 0.3s ease;
}
.dropdown-trigger:hover + .dropdown-content {
  display: block;
}

即使加了 transition，只要涉及 display，动画就无效
若同时设了 opacity 或 transform，那些属性会动，但高度变化仍是突兀的
移动端触摸时，:hover 不稳定，display 切换还容易引发布局抖动

`max-height` 过渡的关键设置和坑点

这是目前唯一能真实推动下方内容、且兼容所有现代浏览器的纯 CSS 方案。核心在于用一个“足够大但固定”的 max-height 替代 height: auto。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确写法示例：

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
<p>.dropdown-trigger:checked ~ .dropdown-content,
.dropdown-trigger:focus-within ~ .dropdown-content {
max-height: 250px; /<em> 必须是具体数值，不能是 auto 或 fit-content </em>/
opacity: 1;
}</p>

max-height 值要略大于菜单实际最大高度（比如最多 6 个选项 + padding ≈ 220px，那就设 250px）
设太小会导致内容被截断；设太大（如 1000px）会让动画变慢，尤其收起时明显拖沓
必须配 overflow: hidden，否则超出部分会漏出来
避免混用 visibility: hidden ——它不可过渡，一设就立即隐藏，破坏动画连贯性