可以在Safari上运行但无法在其他任何浏览器上运行的Javascript

Question

我使用Javascript中的requestAnimationFrame通过更改其“顶部”和“左侧” CSS属性来移动html div 。 它可以在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。

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

可以在Safari上运行但无法在其他任何浏览器上运行的Javascript

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-02-06 22:31:29

解决方案2
0 2015-02-06 22:26:11

解决方案3
0 2015-02-06 23:09:01

可以在Safari上运行但无法在其他任何浏览器上运行的Javascript

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-02-06 22:31:29

解决方案2 0 2015-02-06 22:26:11

解决方案3 0 2015-02-06 23:09:01

解决方案1
1 已采纳 2015-02-06 22:31:29

解决方案2
0 2015-02-06 22:26:11

解决方案3
0 2015-02-06 23:09:01