时间戳

首页 > 解决方案 > 如何切换 Font Awesome 动画图标？

javascript - 如何切换 Font Awesome 动画图标？

问题描述

我接受了这个问题。

$('.lock').click(function() {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock').css('color', 'green');
  }, 600);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

单击红色锁定图标会启动一个动画，该动画会导致绿色解锁图标。现在单击绿色解锁图标应该会执行相应的相反操作。如何切换两个图标？

标签： javascriptcssanimationcss-animationsfont-awesome

解决方案

您可以调整 JS 以将其是否处于锁定状态保存在您检查的变量中以应用正确的样式并在每次之后翻转它，就像这样

let locked = true;
$('.lock').click(() => {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    if (locked) {
      $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
      $('.fa-unlock').css('color', 'green');
    } else {
      $('.fa-lock').css('color', 'red');
      $('.fa-unlock').css('color', 'rgba(0, 0, 0, 0)');
    }
    locked = !locked;
  }, 100); // To change lock & unlock speed. 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

推荐阅读