javascript – CSS动画,点击时切换旋转

前端之家收集整理的这篇文章主要介绍了javascript – 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);
  }
}

解决方法

对于这么简单的事情,你真的不需要关键帧动画.如果您只是在点击时向您的图标添加一个类,然后将其删除,这将应用您的轮换. Here is a working plunkr using font awesome and a simple rotation.这只是一个简单的例子,您将需要使用供应商前缀并注意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);
原文链接:https://www.f2er.com/js/151115.html

猜你在找的JavaScript相关文章