FontAwesome图标点击切换添加fadein/fadeout动画及切换方式合理性咨询

当前图标切换方式是否正确？ #

你的当前代码不正确，因为它只能实现从fa-iconB到fa-iconA的单向切换，无法再切回fa-iconB——每次点击都会直接覆盖元素的class属性，没有判断当前图标的状态，所以没法完成双向切换的需求。

如何添加fadeOut/fadeIn动画实现双向切换？ #

我们可以借助jQuery的动画方法，在淡出完成后切换图标类，再执行淡入动画，同时通过类判断实现双向切换，具体代码如下：

修改后的JS代码 #

$('#icon').click(function() {
  const $iconElement = $(this);
  
  // 先执行淡出动画，时长300毫秒可自定义
  $iconElement.fadeOut(300, function() {
    // 动画完成后，根据当前类切换图标
    if ($iconElement.hasClass('fa-iconB')) {
      $iconElement.removeClass('fa-iconB').addClass('fa-iconA');
    } else {
      $iconElement.removeClass('fa-iconA').addClass('fa-iconB');
    }
    
    // 执行淡入动画，时长与淡出保持一致更协调
    $iconElement.fadeIn(300);
  });
});

HTML代码（无需修改） #

<i id="icon" class="fa fa-iconB" aria-hidden="true"></i>

补充说明 #

• 动画时长300是毫秒单位，你可以根据需求调整为更短或更长的时间（比如200或500）。
• 这里用fadeOut()的回调函数来处理类切换，确保切换操作在图标隐藏后执行，避免切换时出现视觉闪烁。
• 如果想要更简洁的写法，也可以用toggleClass()方法，但需要确保两个图标类不会同时存在，比如：

  $iconElement.fadeOut(300, function() {
    $iconElement.toggleClass('fa-iconA fa-iconB');
    $iconElement.fadeIn(300);
  });
  

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