我尝试让下面的插入符号在单击下拉菜单时旋转 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);
}
}
对于如此简单的事情,您实际上并不需要关键帧动画。如果您只是在单击时向图标添加一个类,然后将其删除,这将应用您的旋转。这是一个使用 font Awesome 和简单旋转的工作 plunkr http://plnkr.co/edit/hmOj1krQl8wdpbIf0iH8。这只是一个简单的示例,您将需要使用供应商前缀,并注意 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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)