用 max-height 替代 height 实现下拉菜单平滑过渡，配合 overflow: hidden 和 opacity；JS 触发需强制重排或 requestAnimationFrame；移动端禁用纯 :hover，应结合点击逻辑与媒体查询。
用 CSS transition 实现导航栏下拉菜单平滑展开
纯 CSS 就能搞定，关键不是加 transition，而是控制高度变化的方式——直接对 height 做过渡会失效（因为 height: auto 无法参与过渡），得换思路。
推荐用 max-height 模拟：初始设为 0，展开时设一个足够大的值（比如 500px），再配合 overflow: hidden 隐藏溢出内容。这样浏览器能计算过渡帧。
- 别写
height: 0 → height: auto，这不会动 -
max-height值要略大于菜单最大可能高度，太小会截断，太大则动画变慢（过渡时间固定时） - 记得给子菜单加
opacity或transform配合，否则一上来就“硬弹”
.nav-dropdown {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease;
}
.nav-dropdown.show {
max-height: 500px;
opacity: 1;
}
JavaScript 控制 class 切换时的时机陷阱
用 JS 触发 show 类后，如果立刻读取 offsetHeight 或操作 DOM，可能拿不到新样式结果——因为类刚加上，浏览器还没重排（reflow）。常见表现是菜单闪一下才展开，或高度计算为 0。
- 用
getComputedStyle(el).maxHeight读取前，先强制触发重排：el.offsetHeight - 更稳妥的做法是用
requestAnimationFrame延迟到下一帧再执行后续逻辑 - 移动端要注意
touchstart和click冲突，建议统一监听click并preventDefault在需要时
hover 触发的下拉菜单在移动设备上失灵怎么办
纯 :hover 的导航栏在 iOS/Android 上基本不可用——触摸屏没有“悬停”概念，第一次点击会触发 hover，第二次才真正跳转，体验极差。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 不要单独依赖
:hover，必须搭配 JS 点击切换逻辑 - 可用
@media (hover: hover) and (pointer: fine)区分精细指针设备，只对鼠标用户启用 hover 效果 - 移动端优先考虑汉堡菜单 + 点击展开，避免在小屏强行保留 hover 下拉
transition 不生效？检查这三项 CSS 继承和渲染属性
即使代码看着没问题，transition 也可能静默失效。最常被忽略的是：
- 父容器有
overflow: hidden且高度固定，导致子元素展开被裁剪，看起来像没动 - 目标元素用了
display: none→block切换，这会中断 transition（display 变化不触发过渡） - 过渡属性写成了
transition: all 0.3s，但某些属性（如display、z-index）根本不支持过渡，反而掩盖了真正该过渡的属性
务必明确写出要过渡的属性：transition: max-height 0.3s ease, opacity 0.2s ease。
真正难的不是写出动画，而是让展开高度刚好适配内容、在各种设备上不闪不卡、且 JS 触发时机和 CSS 渲染节奏对齐——这些细节堆起来，才是用户觉得“丝滑”还是“顿挫”的分水岭。
