意外的 CSS 反转动画

Question

我试图让一个图标按钮在点击时旋转，但每次我移除 class，它都会向后旋转，我想做的是每次点击它时，它只会顺时针旋转。

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>

Answer 1

您希望过渡效果仅在元素从 0 度过渡到 720 度时发生。

在另一个方向（720 度到 0 度），您希望它立即发生，以便用户看不到任何变化。

从原来的位置移除过渡，仅在旋转 class 上使用它。

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>

Answer 2

虽然这可能是故意的，但请注意，除了向后旋转之外，您的代码根本 根本不会旋转按钮 在页面加载后第一次单击它时。

这是一个备用选项（不是唯一的方法），即使您在页面加载后第一次单击它时也会旋转按钮，以防任何人使用。

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>

Answer 3

只有 transition CSS 属性到旋转 class 所以动画会在添加旋转 class 时发生，因为转换属性已添加到 reset-button class 中，动画在添加和删除旋转 class 时都在发生。

最初还从 HTML 中删除旋转 class。

    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);
    }

意外的 CSS 反转动画

Unintended CSS Reversing Animation

html

javascript

css

animation

css-transitions