Javascript CSS 动画，点击时切换旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31108800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS animation, toggle rotate on click
提问by Daniel Kobe
I am try to have the caret in the following rotate 180 degrees on click for my dropdown menu. In the solution Im trying to implement, it changes the class of the the caret to toggle-up or toggle-down on click. The first time I click on it rotates up, the second time it immediately goes back to its starting position and then rotates back up. I smell dirty code, whats the easiest way to add this toggle rotation animation. Thanks in advance for any help.
Heres my current css:
我尝试在以下单击时将插入符号旋转 180 度以显示我的下拉菜单。在我尝试实现的解决方案中，它将插入符号的类更改为在单击时向上或向下切换。我第一次点击它会向上旋转，第二次它会立即回到起始位置，然后再向上旋转。我闻到了脏代码，添加此切换旋转动画的最简单方法是什么。在此先感谢您的帮助。
继承人我目前的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);
}
}
回答by Kevin F
You don't really need a keyframe animation for something this simple. If you just add a class to your icon on click then remove it this will apply your rotation. Here is a working plunkr using font awesome and a simple rotation. This is just a simple example, you will want to make use of vendor prefixes and be aware that css transitions do not work in older browsers.
对于这么简单的事情，您真的不需要关键帧动画。如果您只是在单击时向图标添加一个类，然后将其删除，这将应用您的旋转。这是一个使用 font awesome 和简单旋转的工作 plunkr。这只是一个简单的示例，您将需要使用供应商前缀并注意 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);
回答by arm.localhost
.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
}
.toggle-up {
transform: rotate(180deg);
}
.toggle-down {
transform: rotate(0);
}
You should have an initial state in order to complete your animation.
你应该有一个初始状态才能完成你的动画。
Here is the example: codepen
这是示例：codepen
UPDATE
更新
Here is the version without using javascript: 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);
}
The general idea is to change the block class using Adjacent sibling selectorsand the checkbox checkedstate.
一般的想法是使用相邻同级选择器和复选框选中状态来更改块类。
