如何切換 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>