直接覆盖 .navbar-collapse 的 transition 声明为 max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important，确保收起态 max-height: 0、展开态（.show）设足够大的 max-height（如 120vh），避免 height、overflow: hidden 等干扰；Accordion 需同步修改 .collapse, .collapsing 的 height 过渡；下拉菜单须用 opacity/visibility/transform 三属性配合过渡，禁用 display 过渡。
怎么改 navbar-collapse 的过渡时间与缓动曲线
直接覆盖 .navbar-collapse 的 transition 声明，必须带 !important，否则被 Bootstrap 内置样式压制。它用的是 max-height 过渡，不是 height 或 display。
.navbar-collapse { transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }- 时间别低于 0.2s（太突兀），也别高于 0.8s（小屏触控下用户会等得明显）
- 缓动函数别用
ease或linear——前者开头太慢，后者全程匀速，都容易显得“卡”或“机械” - 推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)：起始柔和、中段提速、收尾收敛，贴合手指滑动直觉
为什么改了 transition 还是闪一下或中途停顿
不是时间设错了，是 max-height 的起始值（0）和目标值不匹配，导致浏览器插值断裂。Bootstrap JS 不控制这个值，全靠你 CSS 定义。
- 收起态必须是
max-height: 0，展开态（即.navbar-collapse.show）的max-height要足够大，比如120vh或500px，不能写死成200px（内容多时会被裁） - 避免给
.navbar-collapse设height、overflow: hidden或border，这些会干扰max-height的渲染上下文 - 子项含
position: absolute（如.dropdown-menu）时不参与高度计算，但视觉上撑开容器——此时需在.navbar-collapse上加padding-bottom预留空间
Accordion 折叠面板怎么同步改动画曲线
Accordion 的动画逻辑和 navbar-collapse 不同，它依赖 .collapse 和 .collapsing 两个类协同工作，只改一个无效。
- 必须同时覆盖：
.collapse, .collapsing { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } -
height属性不能换成max-height或transform——Bootstrap JS 会读取内容高度并内联设置style="height: XXpx"，去掉就断动画链 - 别单独给
.collapse.show写transition，它只在展开完成态存在，不参与“从 0 到 XXpx”的过渡起点 - 如果内容含未加载完的图片，JS 估算高度可能偏小，可临时加
transition: none排查，确认后用loading="lazy"或font-display: swap优化资源加载时机
下拉菜单（.dropdown-menu）的 transition 怎么写才不闪
下拉菜单默认靠 display: none/block 切换，这个属性无法过渡。必须用 opacity、visibility 和 transform 三者配合，且缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 初始态：
.dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-0.5rem); } - 展开态：
.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); display: block !important; } - 过渡声明必须写全：
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out; - 严禁用
transition: all——它会把display也卷进来，反而导致动画卡顿或失效 - 移动端要防点击穿透：加
.dropdown-menu { pointer-events: none; }，再在.show里设回pointer-events: auto
最常被忽略的一点：所有自定义 transition 都必须和 Bootstrap JS 的事件生命周期对齐。比如 shown.bs.collapse 触发时，CSS 动画应刚好结束；若你把时间设成 0.15s，而 JS 默认等待 0.35s 才触发回调，后续逻辑（如焦点管理、滚动定位）就会错位。
