卡顿主因是max-height过渡触发重排，须改用transform/opacity动画并清理padding、border、overflow等干扰盒模型样式；max-height终点值须为固定单位（如120vh或240px），且需确保覆盖下拉菜单全部高度，同时动态控制will-change生命周期。
卡顿不是JS慢，是CSS动画触发了重排——必须把所有动画属性换成transform和opacity，同时砍掉干扰max-height插值的盒模型样式。
为什么改max-height还卡顿
浏览器对max-height做过渡时，会逐帧计算内容高度。一旦.navbar-collapse里有padding、border、position: absolute的.dropdown-menu，或子元素设了overflow: hidden，插值就失准，动画中途“卡住”或“跳变”。
- 删掉所有手动加的
.navbar-collapse { padding: 1rem; border: 1px solid #dee2e6; } - 确认
.nav-link和.dropdown-menu没设overflow: hidden - 临时加
transition: none看是否还截断——如果不截了，就是max-height终点值或盒模型问题
怎么安全放大max-height终点值
max-height不能是none、100%或fit-content，这些值不参与CSS transition。必须用固定可动画单位，且要留余量。
- 通用写法：
.navbar-collapse.show { max-height: 120vh !important; }——120vh比100vh多出滚动条、padding和下拉菜单展开空间 - 精简菜单（≤5个
.nav-link）可用像素值：max-height: 240px，更轻量，减少低端机重排压力 - 这条规则必须放在自定义CSS末尾，或用高权重选择器如
.navbar.navbar-expand-lg .navbar-collapse.show
下拉菜单导致展开后被切半怎么办
.dropdown-menu默认position: absolute，不占.navbar-collapse高度，但它父级.nav-item若有min-height或大padding，视觉上“变高”却没被max-height涵盖，点开就溢出或被裁。
立即学习“前端免费学习笔记（深入）”；
- 给
.navbar-collapse.show .dropdown-menu加position: static !important;，让它随文档流撑高容器 - 或在HTML中加
data-bs-popper="static"：<ul class="dropdown-menu" data-bs-popper="static"> - 排查
@media (max-width: 991.98px)下有没有误写的.dropdown-menu { top: 100% }——移动端折叠态不需要这个
动画变慢后反而更卡？同步调大max-height还不够
把transition-duration从0.35s改成0.6s后卡顿加剧，说明浏览器在慢速动画中对高度插值更严格，而你没同步处理两个隐藏条件：
-
will-change: transform不能全局写，只在touchstart事件里动态加.is-animating类，动画结束立刻清除——否则图层爆炸拖慢渲染 -
ease-in-out比linear更适合移动端，但别自定义cubic-bezier()，容易失重；曲线选错比速度慢更伤体验 - 如果用了图标字体，首次展开可能因加载延迟导致高度估算偏小；加
font-display: swap，或临时禁用字体过渡验证
真正难的不是写对那几行CSS，而是每次改完都要检查：盒模型是否干净、max-height是否真能覆盖下拉菜单展开后的全部高度、will-change有没有在不该出现的时候占着内存。
