为什么包含警报模式会影响 CSS 旋转方向？答案

【问题标题】：Why does inclusion of alert modal affect CSS rotation direction?为什么包含警报模式会影响 CSS 旋转方向？
【发布时间】：2016-04-13 20:31:36
【问题描述】：

每次单击时，我都会尝试将任何.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/

现在，让我真正好奇的是，如果我在调用 .css() 之前添加一个 alert 或 debugger，第三次旋转会按照我的意愿顺时针旋转。

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 使它工作？

【问题讨论】：

@Gothdo 因为我无法区分它是在 0˚ 还是 360˚ 度，除非我使用某种计数器，因为有一堆 .test div .那么我怎么知道我是要旋转到 180˚ 还是 540˚？
@Gothdo 我不确定我是否跟随。你是说只在当前轮换中增加 180 吗？因为问题是我不知道它已经旋转了多少，我只知道旋转矩阵中的值，相当于mod360。
是的，见stackoverflow.com/questions/13592384/…
@Gothdo 但同样，问题是两次点击后我处于 360˚，但是使用您发布的问题中的方法获得这个角度给了我 0˚。所以如果我简单地把它加上 180˚，它就会把我从 360 逆时针移动到 180。
@Gothdo 使用您发布的问题中的方法计算的旋转量值始终为 [0,360)，而 css 属性 -webkit-transform 可以具有任何值。

标签： javascript jquery css rotation

【解决方案1】：

使用

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

获取原始的非计算值。

见JS Fiddle demo。

【讨论】：

太棒了，就可以了，非常感谢您的帮助。任何想法为什么在我的原始代码中在删除样式属性之前应用旋转？
@snookieordie 因为您在删除style 元素后立即添加了新样式。如果您延迟使用setTimeout(function(){}, 0) 设置新样式，浏览器会重新绘制元素，并将新样式应用于重新绘制的元素。
@snookieordie 为了更好地理解，我给你举两个例子一个 JS Fiddle。在the first中，如果你第二次点击div，它不会放大，因为新样式是在旧样式被删除后立即应用的，所以浏览器将其解释为“没有改变”。但是，在the second 中，删除旧样式后，浏览器会重新绘制div，然后应用新样式。

【解决方案2】：

在您的小提琴中，在从 div 中删除样式之前，当 div 处于 360 度时，旋转被应用于 div。所以它将角度设置为 0，然后根据角度 = 0 旋转回 180。警报对话框在设置 CSS 之前添加了一个延迟，这允许删除样式，然后角度设置为 0，然后应用了 CSS。我相信上面@Gothdo 所说的是不断将 180 添加到 div 旋转而不是将角度重置为零。你可以看到完成Here

【讨论】：

在移除样式之前应用旋转的任何想法？从我的代码中我不清楚为什么会发生这种情况。您展示的示例的问题在于它依赖于计数器，每次点击都会将 5 添加到 rotation 或类似的东西。我的问题是，如果可以避免的话，我不想为 100 个单独的 div 设置 100 个单独的计数器。