如何移除Bootstrap 5手风琴chevron图标的旋转动画

效果参考：

你之前写的两段CSS没有生效，核心问题是匹配的目标元素完全不对：

• 第一段针对.collapsing的样式，作用对象是折叠内容面板的展开/收起过渡逻辑，和箭头旋转效果完全无关，额外添加的display: none反而会导致面板切换行为异常
• 第二段代码使用的.accordion-icon-transform不是Bootstrap 5手风琴组件的默认类名，根本选不中箭头元素，自然不会产生效果。

Bootstrap 5的手风琴chevron箭头不是独立的DOM节点，是.accordion-button生成的::after伪元素：默认给伪元素设置了箭头图标、transform旋转属性，搭配transition过渡实现面板展开时的箭头旋转动画，直接覆盖对应样式就能实现需求。

实现代码 #

把以下代码添加到项目的自定义样式文件中，保证样式加载顺序在Bootstrap默认样式之后即可生效：

/* 移除箭头旋转过渡，强制箭头始终保持初始方向不旋转 */
.accordion-button::after {
  transition: none !important;
  transform: none !important;
}

如果你只需要去掉旋转的动画过程、保留展开时箭头翻转180度的最终状态，只保留transition: none !important;这一行声明即可。

内容的提问来源于stack exchange，提问作者Valentin Garreau