Question

我试图测试一个简单的动画帧，但到目前为止我还没能让它工作。我想在屏幕右侧移动一个AAA标签。

如何设置动画，以便在页面加载时，它会在屏幕上向右缓慢移动？我是requestAnimationFrame的新手。

子问题：你不必使用任何requestAnimationFrame，但是你不能只使用JavaScript代码在屏幕上移动对象。

HTML代码：

 <html>
 <body>
  <!--  <script language="javascript" SRC="poker.js"></script>-->
  <div id="test">AAA</div>
  <script>
    window.requestAnimationFrame = window.requestAnimationFrame || 
                                   window.mozRequestAnimationFrame ||
                                   window.webkitRequestAnimationFrame || 
                                   window.oRequestAnimationFrame;


    var start = null;

    var d = document.getElementById("test");

    function step(timestamp) {
      var progress;

      if (start === null) {
        start = timestamp;
      }

      progress = timestamp - start;

      d.style.left = Math.min(progress/10, 200) + "px";

      if (progress < 2000) {
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
</script>
</body>
</html>

Answer 1

您无法使用static，left，right或top属性移动bottom个定位元素。您必须提供#test职位absolute，relative或fixed才能使其发挥作用：

#test{
    position: relative;
}

left，right，top和bottom属性仅适用于定位元素。默认情况下，元素具有position: static;

工作样本：http://jsfiddle.net/carloscalla/t4ynnpbo/

<强>更新

正如我在评论中所解释的那样，您可以使用transition CSS属性来实现相同的目标。

你的CSS将是：

#test2{
    position: relative;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    -ms-transition: all 2s linear;
    transition: all 2s linear;
    left: 0;
}

只有一行JS代码：

document.getElementById("test2").setAttribute('style', 'left: 200px');

工作样本：http://jsfiddle.net/carloscalla/t4ynnpbo/1/

为什么动画帧不起作用？

1 个答案: