我的重啟標志來回旋轉，但我只需要 go 那里，如何解決這個問題？

Question

我有重新加載的跡象，但它go來回，但我只需要go回來。 我嘗試了我所知道的一切，但它不起作用。 請幫幫我，謝謝:)

 var sign_reload = document.getElementById("reload"); document.getElementById("btn").onclick = function () { if (sign_reload.style.transform == "rotate(360deg)") sign_reload.style.transform = "rotate(0deg)"; else sign_reload.style.transform = "rotate(360deg)"; };

 #reload { display: block; margin-left: 100px; position: absolute; font-size: 40px; transition: 2.5s; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <script src="https.//kit.fontawesome.com/8f82e7a054.js" crossorigin="anonymous" ></script> <link rel="stylesheet" href="main.css" /> </head> <body> <div id="reload"><i class="fas fa-redo"></i></div> <button id="btn">CLICK ME</button> <script src="main.js"></script> </body> </html>

Answer 1

您可以考慮使用 animation，方法是在 animation 結束時添加一個 class 刪除：

 var sign_reload = document.getElementById("reload"); sign_reload.addEventListener("animationend", function() { sign_reload.classList.remove('rotate'); }); document.getElementById("btn").onclick = function() { sign_reload.classList.add('rotate'); };

 #reload { display: block; margin-left: 100px; position: absolute; font-size: 40px; }.rotate { animation: change 2s; } @keyframes change { to { transform: rotate(360deg); } }

 <script src="https://kit.fontawesome.com/8f82e7a054.js" crossorigin="anonymous"></script> <div id="reload"><i class="fas fa-redo"></i></div> <button id="btn">CLICK ME</button>

我的重啟標志來回旋轉，但我只需要 go 那里，如何解決這個問題？

問題描述

1 個解決方案

解決方案1
3 已采納 2020-05-10 21:23:06

我的重啟標志來回旋轉，但我只需要 go 那里，如何解決這個問題？

問題描述

1 個解決方案

解決方案1 3 已采納 2020-05-10 21:23:06

解決方案1
3 已采納 2020-05-10 21:23:06