-webkit-transform無法在JavaScript旋轉動畫中工作（無JQuery）

我爲我製作的一個簡單遊戲製作了一個動畫函數，動畫旋轉了4次文本360degrees，使其看起來像是在旋轉文本。我尋找類似的問題，我遇到的問題，但這些建議並沒有解決我的問題。動畫方法是我的視圖的對象的一部分：-webkit-transform無法在JavaScript旋轉動畫中工作（無JQuery）

rotateText : function(deg, message) { 
        this.gameState.innerHTML = message; 

        var animationStepsLeft = this.STEPS; 
        requestAnimationFrame(setStyle); 

        function setStyle() { 
         if(animationStepsLeft > 0) { 
          Perfection.view.gameState.style = 
          "-ms-transform: rotate(" + deg + "deg);" + 
          "-webkit-transform: rotate(" + deg + "deg);" + 
          "-moz-tranfsform: rotate(" + deg + "deg);" + 
          "transform: rotate(" + deg + "deg);"; 
          deg += 28.8; 
          console.log("Rotated"); 
          animationStepsLeft--; 
          requestAnimationFrame(setStyle); 
         }; 
        }; 
       },

的「遊戲狀態」是在HTML中，這是視圖對象的性質的段落元素。該方法應該以度（0）爲起點，並且要旋轉的消息 - 作爲字符串傳遞。它執行的步數是50，每次動畫被調用時，文本旋轉28.8度。我的問題是，動畫在Firefox中完美運行，但似乎不適用於基於webkit的瀏覽器（它不適用於Chrome或Safari）。我應該提到該方法正在被調用，因爲我在調試時附加了一個console.log，並且它被記錄了50次，文本出現在屏幕上，但不旋轉。我在一個類似的帖子，在WebKit瀏覽器中的元素需要被顯示爲inline-block的閱讀，所以我有我的CSS樣式設置爲：

#game-state { 
display: inline-block; 
position: absolute; 
margin-left: auto; 
margin-right: auto; 
margin-top: 200px; 
z-index: 2; 
font-family: "Tahoma", Geneva, sans-serif; 
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black; 
font-size: 100px; 
color: rgb(213,40,8);

}

但它仍然沒有工作！任何人都可以幫我解答！

來源

2015-03-31 coopwatts

我建議你應該打開控制檯，看看裏面element.style。樣式是一組屬性。 EG：style.height, style.visible...不是style=""。

您應該將您的代碼更改爲<element>.style.transform='rotate(' + deg + 'deg)'。對於-ms-transform，您可以嘗試使用.style [' - ms-transform']。

使用原始JavaScript，那麼你必須檢測您的瀏覽器支持的風格。

來源

2015-03-31 16:40:36

我已經查看了控制檯中的元素，並且每種樣式都應用於文本接受轉換。我也嘗試了我的代碼，正如上面推薦的那樣，這就是最初的 – coopwatts 2015-03-31 16:43:24

NVM，我已經分配給他們。你推薦的工作。 – coopwatts 2015-03-31 16:47:30

-webkit-transform無法在JavaScript旋轉動畫中工作（無JQuery）

回答

相關問題