CSS动画：单击切换旋转

Question

我试图让下拉菜单中的插入符号在被点击后旋转180度。在我尝试实现的解决方案中，它通过更改插入符号的类来在点击时切换到“toggle-up”或“toggle-down”。第一次点击后，它会向上旋转，第二次点击后它会立即返回到起始位置，然后再旋转向上。我觉得代码很乱，最简单的方法是添加切换旋转动画。感谢您提前的帮助。
这是我的当前CSS：

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

- Daniel Kobe

---

你的意思是第一次旋转后的状态没有被保留，当你再次点击时，它又执行了旋转操作吗？如果是的话，我认为你应该使用JavaScript来保存最后一次动画的状态。 - Megha

Answer 1

对于这么简单的东西，你其实不需要使用关键帧动画。如果你在点击时只是添加一个类到你的图标上，然后再将其移除，这就会应用旋转效果。这里有一个使用字体图标和简单旋转的工作示例。这只是一个简单的例子，你需要利用供应商前缀并意识到CSS过渡效果在旧浏览器中不起作用。

<div id="container">
    <i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
}

(function(document){
  var div = document.getElementById('container');
  var icon = document.getElementById('icon');
  var open = false;

  div.addEventListener('click', function(){
    if(open){
      icon.className = 'fa fa-arrow-down';  
    } else{
      icon.className = 'fa fa-arrow-down open';
    }

    open = !open;
  });
})(document);

- Kevin F

Answer 2

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
}

.toggle-up {
  transform: rotate(180deg);
}

.toggle-down {
  transform: rotate(0);
}

为了完成你的动画，你需要一个初始状态。

这里有个例子：codepen

更新

这是不使用JavaScript版本的： codepen

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <div class="square toggle-down"></div>
</label>


#checkbox {
  display: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}

#checkbox:checked + .square {
  transform: rotate(180deg);
}

总体思路是使用相邻兄弟选择器和复选框的checked状态来改变块级元素的类。

- arm.localhost

---

我明白了，谢谢。我一直在试图弄清楚如何使用过渡。在您的CodePen中JavaScript if语句中波浪线运算符的目的是什么？ - Daniel Kobe

哦，抱歉。我正在尝试不使用JS来编写这个。这只是草稿。我会将其恢复到初始状态。 - arm.localhost

Answer 3

使用Bootstrap实现的简单方法

.caret {
    transition: 0.5s;
}
  .caret:not(.collapsed){
    transform: rotate(180deg);
  }
  .caret:is(.collapsed) {
    transform: rotate(0deg);
  }
    

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>


<div class="d-flex">
  <span class="bi bi-chevron-down caret collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#detail"></span>
  <div id="detail" class="collapse">
    Hi!
  </div>
</div>

- Alison Nunes