javascript - 单击时将 Font Awesome 图标从一个动画变为另一个图标

Question

当单击展开和折叠表格时，我没有使用 css 转换将每个图标从一个图标旋转到另一个图标。我希望当您打开或关闭表格时每个图标都旋转 180 度。我尝试使用 fa-rotate 和 Flip ，但不起作用，我也没有应用任何 css 过渡

在这里摆弄 - https://jsfiddle.net/kcexpg4j/3/

body{border:1px solid black}
table{width:400px;margin:0 auto}
.fa{cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
   <caption>
      <span class="module_expand custom_collapse" id="myCollapse_13" onclick="jQuery('#myCollapse_13').parent('').parent().find('tbody:eq(0)').attr('style','display:none');jQuery('#myExpand_13').removeAttr('style');jQuery('#myCollapse_13').attr('style','display:none');">
      <i class="fa fa-minus" aria-hidden="true"></i>
      </span>
      <span class="module_expand custom_expand" id="myExpand_13" onclick="jQuery('#myExpand_13').parent().parent().find('tbody:eq(0)').removeAttr('style');jQuery('#myExpand_13').attr('style','display:none');jQuery('#myCollapse_13').removeAttr('style');" style="display:none">
      <i class="fa fa-plus" aria-hidden="true"></i>
      </span>
      <span>Current Waiver Claims</span>
   </caption>
   <tbody>
      <tr>
         <th>Round</th>
         <th>Add</th>
         <th>Drop</th>
         <th>Time Entered</th>
      </tr>
      <tr>
         <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td>
      </tr>
   </tbody>
</table>

Answer 1

点击事件触发后，您可以切换三个类:

$('.fa').click(function(){
  $(this).toggleClass('fa-minus fa-plus rotate');
  $('tbody').toggle();
});

body {border: 1px solid black}
table {width: 400px; margin: 0 auto}
.fa {cursor: pointer; transition: transform .75s} /* adjust to your needs */
.rotate {transform: rotate(180deg)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
  <caption>
    <i class="fa fa-minus" aria-hidden="true"></i>
    <!--<i class="fa fa-plus" aria-hidden="true"></i> not necessary to use both -->
    <span>Current Waiver Claims</span>
  </caption>
  <tbody>
    <tr>
      <th>Round</th>
      <th>Add</th>
      <th>Drop</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td>
    </tr>
  </tbody>
</table>