Question

我想简单地每x毫秒为一个形状设置动画。我在CODEPEN中这样做。

我尝试使用以下方式移动它：

JavaScript的：

ball.getBoundingClientRect().left += 100 + 'px'
ball.style.left += 100 + 'px'

jQuery的：

$('#ball').position().left += 100 + 'px'

但似乎没有任何效果。球出现，但不动。也会调用超时。控制台中没有错误被抛出。

var ball = null;
var ball_x = null;
var ball_y = null;

function doMove() {
  ball.style.left += 100 + 'px';
  setTimeout(doMove,100); 
}

function init() {
  ball = document.getElementById('ball');
  ball_x = ball.getBoundingClientRect().left; //displays correct location
  ball_y = ball.getBoundingClientRect().top; //displays correct location

  doMove();
}

window.onload = init;

CSS：

#ball {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 200px;
}

HTML：

<div>
  <div id='ball'></div>
</div>

Answer 1

问题是left css返回类似100px值的文本，而不是数字值，因此无法正常工作。因此，使用+=进行字符串连接不是创建无效值的数字连接

getBoundingClientRect()会返回一个只读对象，因此更改其属性不会产生影响

返回的值是一个DOMRect对象，其中包含只读左侧，以像素为单位描述边框的top，right和bottom属性。 top和left相对于视口的左上角。

＆＃13;

var ball = null;

function doMove() {
  ball.style.left = ((parseInt(ball.style.left) || 0) + 100) + 'px'
  setTimeout(doMove, 2000);
}

function init() {
  ball = document.getElementById('ball');

  doMove();
}

window.onload = init;

＆＃13;

#ball {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 200px;
  transition: left 2s;
}

＆＃13;

<div>
  <div id='ball'></div>
</div>

＆＃13;

无法在codepen中设置DOM元素的动画

1 个答案: