Возможно ли получить координаты блока при его перемещении в реальном времени?

Question

[Destell]

Блок анимируется через transform, перемещается по оси Y.
elem.getBoundingClientRect() выдает координаты крайних позиций блока.
Возможно ли получить координаты блока при его перемещении в реальном времени? Т.е., например, чтобы в момент перемещения блока console.log выводил изменение его top с начальной точки и до завершения анимации?

Comments

[Владимир Проскурин]

Странно так пометить решением ответы, а потом убрать.

Answer 1

[Владимир Проскурин]

Ну например создать setInterval, и чекать позицию каждые N миллисекунд. Только потом не забудьте убить таймер, когда не нужен будет

Comments

[Destell]

Возможно ли чекать конкретное число при использовании setInterval ? Т.е. в тот момент, когда позиция блока равна, допустим, 70, выполнялось условие.
Попробовал сделать через заинтерваленный elem.getBoundingClientRect(), но условие не срабатывает.

[Владимир Проскурин]

Destell, вряд-ли попадете в 70, шаг анимации вряд-ли ровно 1px. Делайте сравнение либо >= 70, либо >=65 && <= 75

Answer 2

[Алексей]

Думаю, что как-то так:
https://codepen.io/HaJIuBauKa/pen/QxXwLo

Comments

[Destell]

Возможно ли чекать конкретное число при использовании setInterval ? Т.е. в тот момент, когда позиция блока равна, допустим, 70, выполнялось условие.
Попробовал сделать через заинтерваленный elem.getBoundingClientRect(), но условие не срабатывает.

[Алексей]

Destell, очевидно она не равна 70 в тот момент, попробуйте сравнение больше\меньше.