停止JavaScript div旋轉

這是一個腳本，使div旋轉.. 現在我試圖只做一個旋轉，並停止腳本..你能幫我嗎？如何停止此腳本只有一個旋轉？我是新來的這個編程語言.. d：停止JavaScript div旋轉

<body style="-webkit-transform: rotate(0deg);"> 
    <div id="wrap"> 
     <p>some content</p> 
     <script type="text/JavaScript"> 
      function getTransformProperty(element) { 
       var properties = ['transform', 'msTransform', 'WebkitTransform', 'MozTransform' , 'OTransform']; 
       var p; 
       while (p = properties.shift()) { 
        if (typeof element.style[p] != 'undefined') { 
         return p; 
        } 
       } 
       return false; 
      } 
      var div = document.getElementById('wrap'); 
      var property = getTransformProperty(div); 
      if (property) { 
       var d = 0; 
       setInterval(function() {div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';}, 10); 
      } 
     </script> 
    </div>

來源

2015-09-12 merdolo dafoca

這是一個非常奇怪的旋轉div的方法。您是否考慮過使用類轉換或CSS動畫？ –

@JonathanBrooks你是對的，也許這不是做動畫的最好方法，但要解決這個問題並且在知識層面上，他理解如何處理間隔就足夠了。而且你可以清除他們，阻止他們 – webdeb

@JonathanBrooks實際上不想開始深入的討論，但我想與你分享這個鏈接，因爲你正在談論良好的實踐等..所以請它值得閱讀https://css-tricks.com/myth-busting-css-animations-vs-javascript/ – webdeb

當然，你可以通過清除interval做到這一點。

if (property) { 
    var d = 0; 
    interval = setInterval(function() { 
     d++; 
     div.style[property] = 'rotate(' + (d % 360) + 'deg)'; 
     if (d == 360) clearInterval(interval); // clearInterval if 360deg reached.. 
    }, 10); 
}

來源

2015-09-12 21:35:46 webdeb

哦，是的，你是對的，這是因爲d ++首先返回最後一個值，然後遞增..我將編輯代碼。 – webdeb

您的方法並不理想。最好的辦法是使用CSS類過渡，就像這樣：

//setTimeout is merely for delaying the effect for display purposes 
 
setTimeout(function(){ 
 
    document.getElementById("wrap").classList.add("rotate"); 
 
}, 1000);

#wrap { 
 
    -webkit-transition: -webkit-transform 1s; 
 
      transition: transform 1s; 
 
} 
 

 
#wrap.rotate { 
 
    -webkit-transform: rotate(360deg); 
 
     -ms-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
}

<div id="wrap"> 
 
<p>some content</p> 
 
</div>

更少的代碼！

來源

2015-09-12 21:36:32

你能解釋爲什麼這應該是正確的答案嗎？ – webdeb

我真的不明白爲什麼人們認爲，使用CSS轉換非常好。我認爲這足以構建滑塊，但在性能方面絕對不理想。這聽起來很可笑，因爲大家都知道css是由GPU驅動的，但是他們忘記了，gpu正在計算道具並且渲染過程緩慢，但是由佈局引擎完成。這就是爲什麼HTML5遊戲不使用css動畫..因爲他們真的很爛.. – webdeb

這是一個錯誤的結論。你不是用js修改css，而是修改html元素屬性。一個元素的CSS和樣式是不同的東西..在我看來，代碼在一個地方是更好的可讀性。而不是三個..喜歡給它一個類與JS和搜索25 CSS文件.. for這個類...但我同意好的代碼是可讀和可維護的。誰將維護你的25個CSS文件？你會，你的整個生命;） – webdeb

停止JavaScript div旋轉

回答

相關問題