警告モーダルを含めるとCSSの回転方向に影響するのはなぜですか？

Question

.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", 
    }); 
}); 

これは最初の2回のクリックのために正常に動作しますが、それは、私はすでにきたという事実にもかかわらず、360˚から180˚に回転だかのように第三のクリックで、div要素は、反時計回りに回転style属性を削除しました。

は、ここで作業フィドルです：https://jsfiddle.net/wwny5q5d/3/

さて、私は本当に好奇心持っている事は、私が.css()を呼び出す前にalertまたはdebugger追加した場合、私は、時計回りにそれをしたいと、第3の回転が行くということです。

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を含めることは、それを動作させるのでしょうか？

Answer 1

使用

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

を見ることができます。

JS Fiddle demoを参照してください。

Answer 2

あなたのフィドルでは、スタイルがdivから削除される前の360で、回転がdivに適用されています。したがって角度を0に設定し、angle = 0に基づいて180に戻します。アラートダイアログでは、CSSが設定される前に遅延が加えられ、スタイリングの除去が可能になり、角度は0に設定されます。 CSSが適用されます。上記の@Gothdoが言っていることは、角度を0に戻すのではなく、div回転に180を続けて追加することです。あなたは、元の、非計算値を取得することで行わHere