javascript - 为什么包含警报模态会影响CSS旋转方向？

我试图每次单击将.test div顺时针旋转180°。

我所做的基本上是：


如果没有旋转，请旋转至180°。
如果已将其旋转到180˚，则旋转到360˚。
如果已将其旋转到360˚，请删除transform和transition属性，然后旋转到180˚。

$(".test").click(function(){
    var angle;
    var matrix = $(this).css("-webkit-transform")
    if (matrix == "none") { //div hasn't been rotated yet
        angle = 0;
    }
    else {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0]; //should be -1 if div is upside down, 1 if it is normal.
        if(a == 1) {
            $(this).removeAttr('style');
            angle = 0;
        }
        else {
            angle = 180;
        }
    }
    $(this).css({
        "-webkit-transform": "rotate("+(angle+180)+"deg)",
        "-moz-transform": "rotate("+(angle+180)+"deg)",
        "transform": "rotate("+(angle+180)+"deg)",
        "-webkit-transition": "-webkit-transform 0.3s ease-in",
    });
});

对于前两次单击，此方法工作正常，但是在第三次单击时，div逆时针旋转，就好像它从360˚旋转到180˚，尽管事实上我已经删除了style属性。

这是一个有效的小提琴：https://jsfiddle.net/wwny5q5d/3/

现在，让我真正感到好奇的是，如果我在调用alert之前添加了debugger或.css()，则第三轮旋转将按我希望的方向进行。

alert("Now it will always rotate clockwise")
$(this).css({
    "-webkit-transform": "rotate("+(angle+180)+"deg)",
    "-moz-transform": "rotate("+(angle+180)+"deg)",
    "transform": "rotate("+(angle+180)+"deg)",
    "-webkit-transition": "-webkit-transform 0.3s ease-in",
});

所以我的问题是：为什么我的div在第三次单击时不顺时针旋转？为什么包含alert使其起作用？

最佳答案

采用

this.style.cssText.match(/\((\d+)deg\)/)[1])

以获得原始的非计算值。

请参见JS Fiddle demo。