点击旋转，再点击恢复初始状态
Posted 努力┗(｀O′)┛奋斗！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击旋转，再点击恢复初始状态相关的知识，希望对你有一定的参考价值。
今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下
1.html
<div class="box rotate"></div> //需要加一个初始状态
2.CSS
.box{ //普通样式
width:100px;
height:100px;
background:skyblue;
}
.rotate1{ //旋转后的位置
transform:rotate(45deg);
transtion:all .3s linear;
}
.rotate{ //初始状态的旋转位置
transform:rotate(0);
transtion:all .3s linear;
}
3.JQ
<script>
$(function(){
$(".box").click(function(){
if($(this).hasClass("rotate")){
$(this).removeClass("rotate").addClass("rotate1");
}else{
$(this).removeClass("rotate1").addClass("rotate");
}
})
})
</script>
以上是关于点击旋转，再点击恢复初始状态的主要内容，如果未能解决你的问题，请参考以下文章