javascript - 单击 Javascript 时旋转

Question

我想在点击时旋转这个 div，当它被点击时它必须保持旋转状态(45 度)。但是当你再次点击它会回到原来的旋转(0 度)。

这是我现在的代码，也许有人可以帮助我!？

JSFIDDLE:

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

代码:

    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/