Question

我在Javascript中使用requestAnimationFrame来移动html div，方法是更改其“top”和“left”CSS属性。它在Safari 7.1.2上运行正常，但div在Firefox，Chrome或Opera上没有任何影响。

疯狂的是，在Chrome和Opera上，如果你拖动窗口的一角（试图改变它的大小），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

问题是你的过渡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，我建议您只使用requestAnimationFrame设置top / left。

Answer 2

如果你在每个其他动画帧上运行它，它在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 3

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

非常有用，只需调用脚本，无需-o -moz -webkit

Javascript在Safari上工作，但在任何其他浏览器上都没有

3 个答案: