如何切换 Font Awesome 动画图标？

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

您不能为两个不同的图标设置动画以获得解锁效果。 但是，如果不是很重要，您可以创建自己的 svg 图标并制作动画。

 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>

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>