必须同时覆盖.collapse和.collapsing的transition才生效，因bootstrap 5动画依赖.collapsing中间态的height过渡；改.animation需加!important并保留height属性，否则js内联样式失效或动画跳变。
Bootstrap 5 的 Accordion 默认样式能用，但想“优雅定制”——比如改动画、调边框、加箭头、适配动态内容——不能靠覆盖几个 class 就完事，得清楚哪些地方 JS 强控、哪些 CSS 可安全接管、哪些属性一改就崩。
为什么直接改 .collapse 的 height 或 transition 没反应？
因为 Bootstrap 5 的 collapse 插件在 JS 中硬编码了 style="height: 0px" 或 style="height: 240px"，内联样式优先级高于任何外部 CSS，除非加 !important——但这会破坏响应式高度计算，导致内容被截断或动画跳变。
真正该动的是两个状态类：
-
.accordion-collapse.collapse.collapsing：过渡中状态，此时 JS 正在改 height，但你可以用max-height接管 -
.accordion-collapse.collapse.show：展开完成态，需设一个足够大的max-height（比如500px），且必须和 collapsing 的 transition 一致
示例（禁用 height 动画，启用 max-height）：
.accordion-collapse.collapse.collapsing {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-collapse.collapse.show {
max-height: 500px;
}
如何让折叠箭头随展开/收起平滑旋转？
Bootstrap 不自带图标，但会在按钮上自动添加 .collapsed 类（注意：是“已折叠”时才加，不是“未折叠”）。所以箭头逻辑要反过来写：
- 用
::after伪元素插入 ▼，并设transition: transform 0.2s -
button.accordion-button:not(.collapsed)::after→ 展开态：加transform: rotate(-180deg) -
button.accordion-button.collapsed::after→ 折叠态：保持默认角度（或显式设rotate(0)） - 别忘了给按钮留出足够左右 padding（至少
1.5rem），否则手指点到箭头区域可能不触发事件
边框颜色死活改不掉？检查 .accordion-item 的继承链
Accordion 的外边框不是由 .accordion-button 或 .accordion-collapse 控制的，而是由最外层的每个面板容器 .accordion-item 的 border-color 决定。它默认继承自 Sass 变量，CSS 中直接写：
.accordion-item {
border-color: #dc3545;
}
如果无效，大概率是权重不够——Bootstrap 的原始规则带 .accordion 前缀，所以建议增强选择器：
#faq-accordion .accordion-item {
border-color: #dc3545;
}
注意：border-width 和 border-style 也得保持一致（默认是 1px solid），否则视觉会错位。
内容高度完全不可预估时，该用 transform 还是 max-height？
max-height 方案需要你预设一个“够大”的值（如 500px）。一旦内容超过这个值，就会被截断；设太大又会导致动画变慢（比如从 0 → 2000px）。
更鲁棒的做法是绕过尺寸动画，改用 transform: scaleY() + opacity：
- 给
.accordion-collapse加transform-origin: top -
.collapsing设transform: scaleY(0); opacity: 0 -
.show设transform: scaleY(1); opacity: 1 - 务必移除所有涉及
height和max-height的 transition，否则动画冲突卡顿
这个方案不依赖内容高度，也不触发布局重排，但要注意父容器不能设 overflow: hidden，否则缩放过程会被裁剪。
最常被忽略的一点：自定义动画后，.accordion-button::after 的旋转必须单独配 transition，且 timing 要和折叠动画对齐，否则视觉不同步——这比改错 border-color 更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
