手风琴展开时图标旋转180度应使用CSS变量--bs-accordion-icon-transform统一控制，配合.accordion-button::after的transition实现平滑动画，避免硬编码角度或JS干预。
手风琴展开时图标如何旋转180度
直接用 transform: rotate(180deg) 最简单，但硬编码角度值会让后续调整（比如改成90度翻转）变得麻烦。Bootstrap 5+ 支持 CSS 变量，推荐把旋转角度抽成 --bs-accordion-icon-transform，这样全局统一、主题可换。
默认 Bootstrap 的手风琴图标是通过伪元素 ::after 渲染的，它本身已定义了 transform，所以你只需覆盖这个变量即可生效：
:root {
--bs-accordion-icon-transform: rotate(180deg);
}
注意：这个变量只在 .accordion-button:not(.collapsed) 下被使用，无需手动写 JS 切类或监听事件。
为什么加 transition 却没动画效果
常见错误是只给 transform 加过渡，但没指定作用对象——Bootstrap 的图标是伪元素，必须显式对 ::after 设置 transition：
- ✅ 正确写法：
.accordion-button::after { transition: transform 0.2s ease-in-out; } - ❌ 错误写法：只写
.accordion-button { transition: transform ...; }（父元素 transform 不影响伪元素） - 如果用了自定义 SVG 或背景图图标，要确保它被包裹在
::after里，或改用background-position+transition替代
用 CSS 变量切换多种旋转方向（上/下/右）
除了 180° 垂直翻转，有时需要水平收起（→←）或顶部展开（↑↓）。这时别写多套 class，直接复用变量：
.accordion-flip-right .accordion-button:not(.collapsed)::after {
--bs-accordion-icon-transform: rotate(90deg);
}
.accordion-flip-up .accordion-button:not(.collapsed)::after {
--bs-accordion-icon-transform: rotate(-90deg);
}
关键点：
- 变量作用域是伪元素自身，所以必须在
::after选择器里覆盖，不能只挂到.accordion-button - Bootstrap 5.3+ 才正式将
--bs-accordion-icon-transform作为公开变量；旧版本需先查源码确认是否支持，否则得用!important强制覆盖 - 若图标用的是
background-image，旋转无效，应改用mask-image+transform或直接换 SVG
JS 主动触发展开时图标不更新
用 accordionInstance.show() 或 el.classList.remove('collapsed') 手动控制状态时，CSS 变量不会自动响应——因为变量只是样式声明，不感知 DOM 类变化逻辑。
解决方案只有两个：
- ✅ 确保手动操作后，对应按钮确实拥有
.collapsed类（或没有），Bootstrap 的 CSS 规则才能匹配生效 - ✅ 检查是否误删了默认的
.accordion-button::after样式（比如重置了content或display） - ⚠️ 不要用 JS 动态改
style.transform，会和 CSS 变量冲突，优先走 class 控制流
最常被忽略的是：自定义图标替换后忘了保留 accordion-button::after 的基础结构，导致变量无处落脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
