點擊旋轉Javascript

Question

我想點擊旋轉這個div，當它被點擊時它必須保持旋轉狀態（45deg）。但是當你再次點擊它會回到原來的旋轉（0deg）。

這是我現在的代碼，也許有人可以幫助我！

的jsfiddle：

https://jsfiddle.net/sz2yfr51/2/

CODE：

var boxopen = document.getElementById('boxopen'); 
boxopen.addEventListener("click", function(){ 
    boxopen.style.animation = "rotate 2s"; 
    boxopen.style.webkitAnimation = "rotate 2s"; 
}); 

Answer 1

您可以使用style.transform和style.transition：

var boxopen = document.getElementById('boxopen'); 
var rotate = 0; 

boxopen.addEventListener("click", function(){ 
    rotate = rotate ? 0 : 45; 
    boxopen.style.transform = "rotate(" + rotate + "deg)"; 
    boxopen.style.transition = "transform 2s"; 
}); 

https://jsfiddle.net/sz2yfr51/8/

Answer 2

所有你需要做的就是用一個變量來保持狀態，並扭轉該州的動畫。

還要添加animation-fill-mode : forwards;以允許對象在最終的關鍵幀狀態下解決。

以下代碼可用於反轉您提供的旋轉。

@keyframes rotateback { 
0% { 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 

100% { 
    -moz-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 
} 

看看這個小提琴：https://jsfiddle.net/t60Lsmqj/