侧边栏下拉时箭头的旋转动画(treeView控件)

霸气de小男生 提交于 2020-02-28 13:30:50


//点击菜单时箭头旋转
let treeView = document.getElementsByClassName("treeview");//let解决闭包问题
let last=document;
  for (let i = 0; i <treeView.length ; i++) {
    treeView[i].addEventListener("click",function(){
    let that = treeView[i];
    if (that.classList.contains("menu-open")){
      last.getElementsByTagName("i")[1].style.transform="rotateZ(180deg)";
      that.getElementsByTagName("i")[1].style.transform="rotateZ(0deg)";
      that.getElementsByTagName("i")[1].style.transition="0.5s";
   }else{
      last.getElementsByTagName("i")[1].style.transform="rotateZ(0deg)";
     that.getElementsByTagName("i")[1].style.transform="rotateZ(180deg)";
     that.getElementsByTagName("i")[1].style.transition="0.5s";
  }

 //把上次点击事件的元素保存
  last = that;
})
}

<!--网页源代码-->

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!