CSS动画，点击切换旋转
10 浏览
CSS动画，点击切换旋转
我试图让下拉菜单中的小三角在点击时旋转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);
}
}
图片链接：https://i.stack.imgur.com/d2VG1.png