为Bootstrap手风琴实现平滑旋转箭头切换效果

嘿，你已经搞定了箭头旋转的状态切换，现在只需要加个过渡属性就能实现平滑动画啦！问题的核心是让transform属性的变化有过渡动画，只需要在你的.tab-arrow样式里添加transition属性就行。

修改后的CSS代码 #

.tab-arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* 添加过渡动画，这里用0.3秒的缓动效果，你可以调整时间和缓动函数 */
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.collapsed .tab-arrow {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

关键说明 #

• transition: transform 0.3s ease 指定了当transform属性发生变化时，会在0.3秒内以ease（先慢后快再慢）的节奏完成过渡。你可以把0.3s改成0.5s这类数值调整动画快慢，也可以用linear（匀速）替换ease改变动画节奏。
• 保留多浏览器前缀是为了兼容旧版本浏览器，如果你不需要兼容非常老旧的浏览器，也可以简化成只写标准的transform和transition属性。

这样修改之后，当你点击手风琴按钮切换展开/折叠状态时，箭头就会平滑地旋转，而不是突然跳转啦！

内容的提问来源于stack exchange，提问作者Pedro Corchero Murga