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

我试图在每次点击时将任何.test div顺时针旋转180˚。为什么包含警报模式会影响CSS旋转方向？

我所做的基本上是：

如果没有发生旋转，旋转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", 
    }); 
});

这对于前两个点击工作正常，但在第三次点击，股利，逆时针旋转，仿佛它是从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列入使其工作？

来源

2016-04-13 digglemister

@Gothdo因为我不能区分它是在0˚还是360˚度，除非我使用某种计数器，这是我不想要的，因为有一些'.test' div。那么如何知道我是否想旋转180˚或540˚？ – digglemister

@Gothdo我不知道我跟着。你是说只在当前的旋转中加180？因为问题在于我不知道它已经旋转了多少，所以我只知道旋转矩阵中的值，它们相当于mod360。 – digglemister

是的，请参阅http://stackoverflow.com/questions/13592384/how-to-retrieve-the-angle-in-css3-rotate –

使用

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

得到原始的，非计算值。

参见JS Fiddle demo。

来源

2016-04-13 22:03:34

太棒了，会做到这一点，我真的很感激帮助。任何想法为什么在我的原始代码中旋转是在style属性被删除之前应用的？ – digglemister

@snookieordie因为您在删除'style'元素后立即*添加新样式*。如果您延迟使用'setTimeout（function（）{}，0）'设置新样式，浏览器将重新绘制该元素，并将新样式应用于重新绘制的元素。 –

@snookieordie为了更好的理解，我会给你两个JS小提琴的例子。在[第一个]（https://jsfiddle.net/03mpau55/）中，如果第二次点击'div'，它将不会放大，因为在删除旧样式后会立即应用新样式，因此浏览器会解释它是“没有改变”。然而，在[第二个]（https://jsfiddle.net/schnkjhp/）中，删除旧样式浏览器后重新绘制'div'，之后应用新的样式。 –

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

来源

2016-04-13 21:58:57 Hoopson2

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

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

回答

相关问题