Question

我为我正在制作的简单游戏制作了一个动画功能，动画将一些文本旋转了360度，使其具有文字旋转的外观。我找到了与我正在经历的问题类似的问题，但这些建议并没有解决我的问题。动画方法是我的视图对象的一部分：

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中的内容。 Style是一组属性。 EG：style.height, style.visible...不是style=""。

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

使用原始javascript，您必须检测浏览器的支持样式。

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

1 个答案: