Невозможно анимировать элемент DOM в кодепе

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, который содержит только для чтения, Свойства верхнего, правого и нижнего уровня, описывающие рамку в пикселях. сверху и слева относительно левого верхнего угла окна просмотра.

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;

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

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