我正在嘗試制作一個圖示按鈕以在單擊時旋轉，但是每次我洗掉類時，它都會向后旋轉，我想做的方式是每次單擊它時，它只會順時針旋轉。
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>uj5u.com熱心網友回復：
您希望僅當元素從 0 旋轉到 720 度時才會出現過渡效果。
在另一個方向（720 度到 0 度），您希望它立即發生，以便用戶看不到任何變化。
從它所在的位置洗掉過渡，并將其僅用于旋轉類。
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>uj5u.com熱心網友回復：
雖然這可能是故意的，但請注意，除了旋轉回傳之外，您的代碼在頁面加載后第一次單擊時根本不會旋轉按鈕。
這是一個替代選項（不是唯一的方法），即使您在頁面加載后第一次單擊它時也會旋轉按鈕，以防任何人使用。
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>uj5u.com熱心網友回復：
只有transition旋轉類的 CSS 屬性，所以影片會在添加旋轉類時發生，因為在重置按鈕類中添加了過渡屬性，影片在添加和洗掉旋轉類時都發生。
還最初從 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);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/483602.html