应使用 .accordion-button::after 插入 unicode 箭头并配合 margin-inline-start: auto 右对齐，通过 .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } 实现展开时上翻，同时添加 will-change: transform 和 transform: translatez(0) 防止渲染抖动与撕裂。
accordion-button 伪元素箭头怎么加才不偏移
默认用 ::after 插入 ▼ 字符，但 Bootstrap 5 的 .accordion-button 有 text-align: center，会导致箭头居中、和文字错位。必须显式覆盖对齐方式，否则旋转后视觉错乱。
- 给
.accordion-button加text-align: left（或flex布局 +justify-content: space-between） - 用
::after插入 Unicode 箭头：content: "▼" - 加
margin-left: auto或margin-inline-start: auto把箭头推到右侧 - 必须加
!important覆盖 Bootstrap 4/5 默认样式（截至 2026 年 3 月仍需）
箭头朝向和 collapsed 类状态怎么对应
collapsed 类名语义反直觉：它表示「当前按钮对应的面板已折叠」，即按钮处于“未激活”状态。所以箭头默认向下（▼），展开后应向上（▲）——也就是当 collapsed 类**不存在**时旋转。
- 默认样式（收起态）：
.accordion-button::after { transform: rotate(0deg); } - 展开态样式：
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } - 别用
.collapsed::after写旋转——那是收起时的状态，不是你想要的动画触发点 - 旋转角度用
-180deg比180deg更稳妥，避免部分浏览器插值方向歧义
为什么加了 rotate 动画却卡顿或跳变
纯 CSS 旋转本身不卡，但和 Bootstrap 的 collapse 过渡叠加时，容易因渲染层冲突导致抖动。关键不在 transform，而在父容器是否启用硬件加速与布局隔离。
- 给
.accordion-button加will-change: transform（仅在 hover/click 时动态加，避免常驻损耗性能） - 确保箭头元素是
display: inline-block或flex，不能是inline（否则 transform-origin 行为不稳定） - 避免同时对同一元素设置
height过渡和transform旋转——collapse 插件正在改高度，你又在转图标，浏览器可能不同步重绘 - 如果用 SVG 图标替代 Unicode，记得加
vertical-align: middle对齐基线，否则旋转中心会偏移
aria-expanded 同步不及时导致箭头状态错乱
Bootstrap 5 不自动更新 aria-expanded 的 class 切换逻辑，只靠 class 名控制视觉。但箭头旋转依赖 .collapsed 类存在与否，而这个类由 JS 注入，有时滞后于 DOM 更新，尤其在快速点击或 SSR 渲染后。
- 不要只靠 CSS 响应
.collapsed—— 加一层 JS 监听：shown.bs.collapse和hidden.bs.collapse - 在事件回调里手动同步：
button.setAttribute('aria-expanded', 'true')并button.classList.remove('collapsed') - 首次加载默认展开项时，务必检查三者是否一致：
aria-expanded="true"、无collapsed类、目标div有show类 - 移动端双击缩放可能触发误判，建议在
touchstart时加preventDefault()防止干扰 collapse 事件流
transform 和 height 的合成层调度并不总一致——尤其在低端 Android WebView 中，得靠 transform: translateZ(0) 强制新建图层，否则第一帧常有撕裂感。
