如何切换 Font Awesome 动画图标？

Question

我接听this question。

$('.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>

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

Answer 1

您无法为两个不同的图标设置动画来获得真正的unlock effect。但是，如果不是很重要，您可以创建自己的 svg 图标和动画。

解锁效果

$('#icon').click(function() {
  $('#icon').toggleClass('green');
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

<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>
#icon {
  width: 52px; /* adjust icon size  */
  height: auto;
  cursor: pointer;
}
#icon rect,
#icon path {
  transition: all 0.5s ease-in-out;
}

#icon rect {
  fill: red;
}
#icon path {
  stroke: red;
  stroke-dasharray: 30;
  stroke-dashoffset: 5;
  fill: none;
}

#icon.green rect {
  fill: green;
}
#icon.green path {
  stroke: green;
  stroke-dasharray: 20;
}
</style>

<div id="icon" class="fa-5x fa-stack lock">
  <svg viewBox="0 0 22 25">
    <rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3"/>
    <path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592"stroke-width="3.5" />
  </svg>
</div>

旋转效果

$('#box').click(function() {
  $('#box').toggleClass('unlock');
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

<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>
   :root {
    --duration-rotate: 1s;
    --delay: 1s;
  }
  
  #green,
  #red {
    backface-visibility: visible;
    transition: all var(--duration-rotate) ease-in-out;
  }
  
  #red {
    transition-delay: var(--delay);
  }
  
  #green {
    transform: rotateY(-270deg);
    transition-delay: 0s;
  }
  
  #box.unlock #red {
    transform: rotateY(90deg);
    backface-visibility: hidden;
    transition-delay: 0s;
  }
  
  #box.unlock #green {
    transform: rotateY(-360deg);
    backface-visibility: visible;
    transition-delay: var(--delay);
  }
</style>

<div id="box" class="fa-5x fa-stack lock">
  <i id="green" class="fas fa-unlock fa-stack-1x" style="color: green"></i>
  <i id="red" class="fas fa-lock fa-stack-1x" style="color: red"></i>
</div>

Answer 2

您可以调整 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>