-webkit-transform在JavaScript旋轉動畫中不起作用（無JQuery）

Question

我為正在制作的簡單游戲制作了動畫功能，動畫將某些文本旋轉360度4次，使文本看起來像在旋轉。 我在尋找與我遇到的問題類似的問題，但是這些建議並不能解決我的問題。 動畫方法是我的視圖對象的一部分：

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

“ gameState”是HTML中的一個段落元素，它是視圖對象的屬性。 該方法應該以度數（0）為起點，並且要旋轉的消息以字符串形式傳遞。 它正在執行的步驟數為50，並且每次調用動畫時，文本都會旋轉28.8度。 我的問題是該動畫可以在Firefox中完美運行，但似乎不能在基於Webkit的瀏覽器中運行（它不能在Chrome或Safari中運行）。 我應該提到該方法正在被調用，因為我在嘗試調試時附加了console.log，並且已記錄了50次，並且文本顯示在屏幕上，但不會旋轉。 我在類似的帖子中讀到，在webkit瀏覽器中，元素需要顯示為嵌入式塊，因此我將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);   

}

但是它仍然無法正常工作！ 誰能幫我！

Answer 1

我建議您打開控制台並查看element.style內的內容。 樣式是一組屬性。 EG： style.height, style.visible...不是style="" 。

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

使用原始javascript，然后必須檢測瀏覽器是否支持樣式。