css - 顺时针旋转 180 度再旋转 360 度

Question

我有一个齿轮图标，我想在激活时顺时针旋转 180 度 (class="cards__cog cards__cog-active")，然后再顺时针旋转 180 度以返回到其停用状态 (class="cards__cog cards__cog-inactive")。我正在使用 React 执行此操作，对单击齿轮时的状态变化使用react。

以下方法有效，但我的问题是:

1)它在页面加载时动画(这是有道理的，因为它具有 cards__cog-inactive 类，但替代方案是什么？)。

2)这很丑陋，必须有一个更简单的方法。

谢谢

.cards {
    &__cog {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 10vh;
            cursor: pointer;

            &-active {
                 animation: rotate180 1s ease;
                animation-fill-mode: forwards;
            }
            &-inactive {
                animation: rotate180to359to0 1s ease;
                animation-fill-mode: forwards;
            }
       }
}


    @keyframes rotate180 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }

    @keyframes rotate180to359to0 {
      0% {
        transform: rotate(180deg);
      }
      99% {
        transform: rotate(359deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }

Answer 1

您可以对其中一个 Action 使用过渡。但两者都不是，因为其中一个会倒退。

而且你不能在初始状态下使用动画，因为你的第一个问题。

这使我们的非事件状态为 360 度，以便它可以以正确的方式从 180 度转换到 360 度，并且动画从 0 到 180 度以从非事件到事件的变化

function change () {

	var elem = document.getElementById("test");
	elem.classList.toggle('active');
}

.test {
  width: 200px;
  height: 100px;
  border: solid 4px red;
  margin: 20px;
  transform: rotate(360deg);
  transition: transform 1s;
}

.active {
  animation: activate 1s;
  transform: rotate(180deg);
}

@keyframes activate {
  from {transform: rotate(0deg);}
  to {transform: rotate(180deg);}
}

<div class="test" id="test">TEST</div>
<button onclick="change();">change</button>