Javascript 适用于 Safari，但不适用于任何其他浏览器

Question

我在 Javascript 中使用 requestAnimationFrame 通过更改 "top" 和 "left" [=33] 来移动 html div =] 属性。它在 Safari 7.1.2 上运行良好，但 div 在 Firefox、Chrome 或 Opera 上没有任何变化。

疯狂的是，在 Chrome 和 Opera 上，如果您拖动 window 的角（试图改变它的大小），div 就会开始移动。 .然后当你从角落松开鼠标时立即停止移动。

这是源代码：

<!DOCTYPE html>

<head>
    <meta charset="utf-8"/>
    <title>exp_2</title>
    <link rel="stylesheet" type="text/css" href="exp_1.css">
</head>

<body>
    <div class="box_out" id="b1"><p id="menu_text">gallery</p></div>

    <script type="text/javascript">
        var middle = document.querySelector("body").clientWidth / 2 - 50;
        window.addEventListener("resize", function() {
            middle = document.querySelector("body").clientWidth / 2 - 50;
        });

        var div = document.getElementById("b1");
        var angle = 0, lastTime = null;
        function animate(time)
        {
            if (lastTime != null)
                angle += (time - lastTime) * 0.0002;
            lastTime = time;
            div.style.top = (150 + Math.sin(angle) * 100) + "px";
            div.style.left = (middle + Math.cos(angle) * 100) + "px";
            requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate);
    </script>
</body>
</html>

这是我一直在使用的 CSS class 和 id：

body
{
    text-align: center;
    background-color: #232323;
    color: white;
}

#menu_text
{
    font-family: Trebuchet MS, Helvetica, Arial;
    font-size: 1.5em;
    padding-top: 2em;
}

.box_out
{
    box-shadow: 2px 4px 15px black;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    text-align: center;
    width: 6em;
    height: 6em;
    background-color: #663300;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
}

.box_out:hover
{
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
}

是 requestAnimationFrame 的问题还是我的 CSS 存在兼容性问题？我什至尝试省略 clientWidth 的事件侦听器，但问题似乎不在这里。

Answer 1

如果在每个其他动画帧上运行它在 Firefox 中效果更好：

    var div = document.getElementById("b1");
    var angle = 0, lastTime = null, toggle = false;
    function animate(time)
    {
        toggle = !toggle;
        if (!toggle) {
          var oldangle = angle;
          if (lastTime != null)
            angle += (time - lastTime) * 0.0002;
          lastTime = time;
          div.style.top = (150 + Math.sin(angle) * 100) + "px";
          div.style.left = (middle + Math.cos(angle) * 100) + "px";
        }
        requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);

Answer 2

问题是你的转换 CSS 导致它不能运行:

-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;

http://jsfiddle.net/xs40d7dd/

我不熟悉 requestAnimationFrame，但我的猜测是它是另一种转换方式（通过 JS 而不是 CSS）。如果你想使用 transition CSS 我建议只设置 top/left 而不使用 requestAnimationFrame.

Answer 3

忘记供应商前缀的有用工具：
https://leaverou.github.io/prefixfree/

非常有帮助，只需调用脚本，不需要 -o -moz -webkit

Javascript 适用于 Safari，但不适用于任何其他浏览器

Javascript working on Safari but not on any other browser

javascript

css

requestanimationframe