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

Why does inclusion of alert modal affect CSS rotation direction?

本文关键字：CSS 旋转 方向 影响 包含警 模式 为什么      更新时间：2024-06-19

每次单击任何.testdiv时，我都试图将其顺时针旋转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使它工作？

使用

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

以获得原始的、未计算的值。

请参阅JS Fiddle演示。

在你的fiddle中，在从div中移除样式之前，当div处于360时，旋转将应用于div。因此，它将角度设置为0，然后在角度=0的基础上旋转回180。警报对话框在设置CSS之前添加了一个延迟，这允许删除样式，然后将角度设置为0，然后应用CSS。我相信@Gothdo上面所说的是不断地在div旋转中添加180，而不是将角度重置回零。你可以在这里看到这一点

相关文章：