必须同时覆盖 .collapse 和 .collapsing 的 transition，因 bootstrap 5 动画依赖 .collapsing 中间态的 height 过渡；自定义 css 需置于官方 css 后，避免 height: auto 导致跳变，并可改用 transform + overflow: hidden 方案实现更轻量动画。
必须同时覆盖 .collapse 和 .collapsing 的 transition
只改 .collapse 没用。Bootstrap 5 的折叠动画靠 JS 切换状态，但真正执行过渡的是 .collapsing 这个中间态类——JS 在展开前加它，在动画结束时移除。默认样式里 .collapsing 的 transition: height 0.35s ease !important 会盖掉你对 .collapse 的修改。
正确写法是：
.collapse, .collapsing {
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
- 必须保留
height作为过渡属性，否则 Bootstrap JS 设置的内联style="height: XXpx"失效 - 时间单位统一用
s（如0.4s），避免ms小数点过多导致解析异常 - 所有自定义 CSS 必须放在 Bootstrap 官方 CSS 文件之后加载，否则被覆盖
height: auto 导致动画跳变或收起后留白
JS 先读取内容高度再设为固定像素值，但如果此时图片没加载完、字体未就绪或 DOM 尚未完全渲染，读出的高度就会偏小，动画中途“塌”一下，或者收起后底部留白。
排查和缓解方式：
- 临时加
transition: none看是否还跳——如果消失，就是高度估算不准 - 给图片加
loading="lazy"或用font-display: swap减少字体阻塞 - 确保父容器有
min-height: 1px，防止塌陷干扰 JS 高度计算 - 给外层加
overflow: hidden !important，防止收起时内容溢出可见区域
想换 transform 或 max-height 方案？先绕过 height 依赖
用 transform: scaleY() 更轻量，但得手动接管高度逻辑，因为 Bootstrap JS 仍会往元素上写 height: XXpx 内联样式，和你的 transform 冲突。
可行最小改动：
.collapse {
height: auto !important;
overflow: hidden;
}
.collapse:not(.show) {
transform: scaleY(0);
transform-origin: top;
}
.collapse.show {
transform: scaleY(1);
}
.collapse {
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in;
}
-
height: auto !important是关键，否则 JS 的内联 height 会压掉 transform - 必须加
overflow: hidden，不然scaleY(0)时内容可能透出 - 别忘了
transform-origin: top，否则缩放中心偏下，视觉错位
图标旋转不同步？.accordion-button::after 要单独控制
Accordion 标题右侧的箭头图标（默认是伪元素）不会随面板自动旋转。它靠 .collapsed 类切换方向，但这个类只在按钮上，不参与折叠动画时序。
同步方案：
- 展开态图标朝下：
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); } - 收起态图标朝右：
.accordion-button.collapsed::after { transform: rotate(0); } - 加
transition: transform 0.3s ease-in-out到.accordion-button::after上，才能和面板动画节奏一致 - 如果用了 SVG 图标，直接在 SVG 标签上加 class 控制
transform更稳定
.collapsing 类的过渡时机与 JS 高度读取之间的微小错位——哪怕只是几毫秒，也容易在低端机或高负载页面上表现为“卡半拍”。建议把动画时长控制在 0.3s–0.5s 区间，既保证感知流畅，又留出 JS 计算余量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
