无法直接对 height: auto 使用 transition，应改用 max-height 配合 overflow: hidden 实现平滑过渡；注意 Safari 兼容性、事件冒泡控制及 transitionend 不可靠性，统一管理过渡时长并清理内联样式。
transition 无法直接作用于 height: auto
这是最常卡住的地方：你写了 transition: height 0.3s ease，菜单展开时却“啪”一下弹出来，毫无过渡。原因很简单——浏览器不知道 height: auto 的具体数值，没法插值计算中间状态。
解决思路不是绕开 height，而是给它一个可计算的起点和终点：
- 用
max-height替代height，设一个足够大的值（比如max-height: 500px），确保内容能完全展开 - 收起时设
max-height: 0，同时配overflow: hidden防止内容溢出 - 过渡用
max-height，而不是height
示例关键片段：
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-menu.open {
max-height: 500px;
}
移动端点击后菜单不收起？检查 click 事件绑定时机
常见现象：点导航项跳转了，但菜单还开着；或者点空白处想收起，却没反应。根本原因是 DOM 更新和事件监听不同步，尤其用 JS 控制 open 类时容易漏掉清理逻辑。
实操建议：
- 不要只靠
click切换类，加一句event.stopPropagation()防止冒泡干扰 - 对“点击外部关闭”，监听
document的click，但需判断目标是否在菜单内：if (!menu.contains(e.target) && !trigger.contains(e.target)) - 路由跳转前手动收起（如用
history.pushState或前端路由的beforeEach钩子）
transition 在 Safari 上失效或闪动
Safari 对 max-height 过渡的渲染更敏感，尤其内容高度变化大时，可能出现跳帧、收不干净、或首次展开无动画。
几个实际有效的缓解方式：
- 加
will-change: max-height提示浏览器优化渲染（但别滥用，仅在交互频繁时加） - 避免同时过渡多个属性，比如别写
transition: max-height 0.3s, opacity 0.3s，拆成单独声明或只留一个 - 确保父容器没有
transform或perspective，它们可能触发 Safari 的合成层 bug，导致过渡中断
用 JavaScript 控制过渡完成后的回调很麻烦
你想在菜单完全展开后聚焦第一个链接，或收起后重置表单，但 transitionend 事件不可靠：它可能被多次触发（比如同时过渡 max-height 和 opacity），也可能因用户快速开关而错过。
稳妥做法：
- 用
getComputedStyle(el).maxHeight检查当前状态，而不是依赖事件 - 过渡时间统一用变量管理，比如 CSS 里定义
--nav-transition: 0.3s，JS 里读取并加setTimeout做兜底 - 收起动作完成后，强制清空内联
style（el.style.maxHeight = ''），避免残留值干扰下一次动画
复杂点不在怎么写 transition，而在怎么让它的行为在各种设备、各种操作节奏下都可预期——尤其是用户连点两次、切后台再回来、或缩放页面时，那些边界情况才是真正在现场咬人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
