Estoy tratando de hacer que un botón de icono gire al hacer clic, pero cada vez que elimino la clase, gira hacia atrás, quería hacerlo de manera que cada vez que se haga clic, solo gire en el sentido de las agujas del reloj.
const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); }); div { display: flex; flex-direction: row; justify-content: center; } .reset-button { transition: 1.5s; } .rotate{ transform: rotate(720deg); } <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>Desea que el efecto de transición ocurra solo cuando el elemento pasa de una rotación de 0 a 720 grados.
En la otra dirección (720 grados a 0 grados), desea que suceda instantáneamente para que el usuario no vea ningún cambio.
Elimine la transición de donde está y téngala solo en la clase rotativa.
const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); }); div { display: flex; flex-direction: row; justify-content: center; } .reset-button {} .rotate { transform: rotate(720deg); transition: 1.5s; } <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>Si bien esto puede ser a propósito, tenga en cuenta que además de girar hacia atrás, su código no gira el botón en absoluto la primera vez que se hace clic en él después de cargar la página.
Aquí hay una opción alternativa (que no es la única forma de hacer esto) que gira el botón incluso cuando hace clic en él por primera vez después de cargar la página en caso de que sea útil para alguien.
const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.style.transition = '1.5s'; btn.style.transform = 'rotate(720deg)'; setTimeout(() => { btn.style.transition = '0s'; btn.style.transform = 'rotate(0deg)'; }, 1500); }); div { display: flex; flex-direction: row; justify-content: center; } .reset-button {} <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>Solo tenga la propiedad CSS de transition a la clase de rotación y, por lo tanto, la animación se producirá cuando se agregue la clase de rotación, dado que la propiedad de transición se agregó en la clase de botón de reinicio, la animación estaba ocurriendo en ambos momentos cuando se agregó y eliminó la clase de rotación .
También elimine inicialmente la clase de rotación de HTML.
const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); }); div { display: flex; flex-direction: row; justify-content: center; } .reset-button { } .rotate{ transition: 1.5s; transform: rotate(720deg); }