如何实现Font Awesome动画图标的双向状态切换功能

核心改动是在点击事件中增加状态判断逻辑，同时处理动画重复触发的问题，具体实现如下：

改动要点 #

• 每次点击前先移除已有的动画类，触发DOM重排后重新添加，保证每次点击都能正常触发翻转动画
• 根据当前锁定图标的可见状态判断切换方向，实现锁和解锁的双向切换
• 颜色切换时机仍保持在动画执行到一半的600ms，对应翻转到背向用户的时间点，视觉过渡更自然

完整实现代码 #

首先是CSS部分，给动画类补充固定时长，和切换逻辑匹配：

@keyframes halfflip {
  to {
    transform: rotateY(360deg);
  }
}

.fa-flip {
  animation-name: halfflip;
  animation-timing-function: ease-in-out;
  animation-duration: 1.2s; /* 新增：固定动画总时长，和600ms的半程切换对应 */
}

然后是JS逻辑替换原有代码：

$('.lock').click(function() {
  const $lock = $('.fa-lock', this);
  const $unlock = $('.fa-unlock', this);

  // 移除旧动画类，触发重排后重新添加，保证动画重复触发
  $lock.removeClass('fa-flip');
  $unlock.removeClass('fa-flip');
  void $lock[0].offsetWidth; // 触发重排，强制浏览器识别类名变更
  $lock.addClass('fa-flip');
  $unlock.addClass('fa-flip');

  setTimeout(() => {
    // 判断当前状态：锁图标为红色说明是锁定状态，切换为解锁，反之切换为锁定
    if ($lock.css('color') === 'rgb(255, 0, 0)') {
      $lock.css('color', 'transparent');
      $unlock.css('color', 'green');
    } else {
      $lock.css('color', 'red');
      $unlock.css('color', 'transparent');
    }
  }, 600);
});

HTML部分可以直接复用原有代码无需修改。

内容的提问来源于stack exchange，提问作者Three Year Old