求助：使用FontAwesome5(SVG with JS)和jQuery实现图标180度旋转动画

嘿，我来帮你搞定这个平滑旋转的问题！你现在的图标是瞬间切换方向，核心是没给元素加上过渡动画，再结合jQuery控制状态就能实现丝滑效果，而且要适配FontAwesome 5的SVG渲染模式，下面是具体步骤：

1. 给图标添加CSS过渡样式 #

因为FontAwesome 5用SVG渲染图标，咱们需要给图标元素加上过渡属性，同时设置旋转基准点，确保旋转围绕中心进行：

/* 自定义图标类，用于控制过渡和旋转 */
.toggle-icon {
  /* 设置transform属性的过渡动画，0.3秒时长+ease-in-out缓动曲线更自然 */
  transition: transform 0.3s ease-in-out;
  /* 旋转基准点设为中心，避免旋转时偏移 */
  transform-origin: center center;
  cursor: pointer; /* 加上鼠标指针，提示可点击 */
}

/* 定义旋转180度的类，点击时切换这个类触发动画 */
.icon-rotated {
  transform: rotate(180deg);
}

2. 调整HTML结构 #

给FontAwesome图标加上咱们自定义的类，方便jQuery选择控制：

<div class="toggle-wrapper">
  <!-- 用同一个向下箭头图标，通过旋转实现方向切换 -->
  <i class="fas fa-chevron-down toggle-icon"></i>
  <div class="collapse-content">
    这是你要展开/收起的内容区域
  </div>
</div>

3. 修改jQuery逻辑 #

不用再切换不同的图标类（比如fa-chevron-down和fa-chevron-up），而是切换旋转类，利用CSS过渡实现平滑动画：

$(document).ready(function() {
  // 绑定图标点击事件
  $('.toggle-icon').on('click', function() {
    // 切换旋转类，触发CSS过渡动画
    $(this).toggleClass('icon-rotated');
    // 同时控制内容区域的展开/收起，用slideToggle保持动画一致性
    $(this).next('.collapse-content').slideToggle(300);
  });
});

关键说明 #

之前你用切换图标类的方式，本质是替换了不同的SVG图标，所以是瞬间变化；现在咱们用同一个图标+CSS旋转的方式，配合过渡属性，就能实现平滑的180度旋转效果啦。

注意哈：如果你的FontAwesome是用SVG with JS模式加载的，浏览器会把<i>标签替换成<svg>元素，要确保自定义的.toggle-icon类正确应用到了生成的SVG上，可以用浏览器开发者工具检查一下元素结构，确保CSS能生效。

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