How to toggle Font Awesome animated icons?-CodePudding

I pick up on 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>

A click on the red lock icon starts an animation which leads to the green unlock icon. Now a click on the green unlock icon should do the corresponding opposite. How to toggle both icons?

CodePudding user response：

You can't animate two different icons to get unlock effect. But, if not critical, you can create your own svg icon and animate.

const icon = document.getElementById('icon');
icon.addEventListener('click', () => {
  icon.classList.toggle('green');
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

#icon {
  width: 52px;
  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;
}

<div id="icon">
  <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>

CodePudding user response：

You can adjust the JS to save whether or not it's in a locked state in a variable that you check to apply the correct styling and flip it after each time, like this

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>