-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 次，文本出现在屏幕上，但没有旋转。我在类似的 post 中读到，在 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。样式是一组属性。例如：style.height, style.visible... 不是 style=""。

您应该将密码更改为 <element>.style.transform='rotate(' + deg + 'deg)'。对于 -ms-transform 你可以尝试使用 .style['-ms-transform']。

使用原始 javascript 然后你必须检测你的浏览器支持的风格。

-webkit-transform 在 JavaScript 旋转动画中不起作用（无 JQuery）

-webkit-transform not working in JavaScript rotation animation(no JQuery)

javascript

css

animation

rotation