Uyarı modunun eklenmesi neden CSS rotasyon yönünü etkiler?

Question

.test div numarasını, her tıklandığında saat yönünde 180 ° döndürmeye çalışıyorum. Ben ne yaptım

temelde: hayır rotasyon oluştu

• ise 180 döndürün.
• 180 ° döndürüldüyse, 360 ° döndürün. 360 döndürüldüğünde uğradıysa
• , transform ve transition özelliklerini kaldırmak ve 180 döndürün.

---

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

Bu ilk iki tıklama için çalışıyor, ancak 180 360 den dönen oymuş gibi üçüncü tıklamada div ben zaten olmasına rağmen, saat yönünün tersi yönde style özniteliği kaldırıldı.

İşte bir çalışma keman var: https://jsfiddle.net/wwny5q5d/3/

Şimdi, gerçekten merak var şey .css() çağırmadan önce alert veya debugger bir eklerseniz ben, saat yönünde onu istediğiniz gibi üçüncü dönme gider.

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

Yani benim sorular şunlardır: Neden üçüncü bir tıklama benim div döndürme yönünde VE niye alert dahil o iş yapmak etmez ki? onun 360 tarzı div kaldırılmadan önce zaman keman olarak

Answer 1

kullanın

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

görebilirsiniz.

Bkz. JS Fiddle demo.

Answer 2

, rotasyon div uygulanıyor. Bu yüzden açı 0 olarak ayarlanıyor ve sonra açı = 0'a göre 180'e dönüyor. Uyarı iletişim kutusu CSS ayarlanmadan önce bir gecikme ekliyor, bu da stilin kaldırılmasına izin veriyor, sonra açı 0'a, sonra CSS uygulanır. Yukarda @Gothdo'nun söylediği gibi, sıfırın sıfırlanması için sıfırdan 180'e sürekli olarak rotasyon eklemesi gerektiğine inanıyorum. Orijinal olmayan bilgisayarlı değeri almak için bu yapılır Here