點擊旋轉，再點擊恢復初始狀態
阿新 • • 發佈：2017-11-13
for htm all 具體實現 mov 實現 scl transform blue
今天遇到要做一個點擊 + 然後開始旋轉動畫後變成 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>
點擊旋轉，再點擊恢復初始狀態