2

Добрый день! Есть элемент который анимируется с помощью css (transform: translateY). Нужно получать его координаты x и y на странице в реальном времени. Пробывал реализовать через getBoundingClientRect() , но он отображает только начальные координаты. Нужно реализовать на чистом JS, без библиотек. Для удобства: пример на jsfiddle

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.rec {
  position: absolute;
  left: 220px;
  top: 260px;
  width: 70px;
  height: 30px;
  background-color: red;
}

.animate {
  animation-name: moveup;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
}

@keyframes moveup{
  0% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(-250px);
  }
  
}
<div class="container">
  <div class="rec animate"></div>
  <div class="coord">22</div>
</div>

3
  • Есть такое событие transitionend - оно генерируется по окончанию анимации. Попробуйте использовать его 18 янв 2018 в 9:46
  • @Дмытрык Зачем оно здесь ? Оно ведь только срабатывает после окончания анимации, а мне нужно в процессе выполнения 18 янв 2018 в 9:48
  • а..., попробуйте setInterval-ом запускать getBoundingClientRect(). Таймер снимите привязавшись к transitionend. 18 янв 2018 в 9:52

1 ответ 1

4

Если правильно понял какой ожидается результат:

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.rec {
  position: absolute;
  left: 220px;
  top: 260px;
  width: 70px;
  height: 30px;
  background-color: red;
}

.animate {
  animation-name: moveup;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
}

@keyframes moveup{
  0% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(-250px);
  }
  
}
<div class="container">
  <div id="rect" class="rec animate"></div>
  <div id="coord" class="coord">22</div>
</div>
<script>
   function changeCoord(timestamp){
   document.getElementById("coord").innerText = 
   document.getElementById("rect").getBoundingClientRect().top;
   requestAnimationFrame(changeCoord);
   };
   requestAnimationFrame(changeCoord);
</script>

4
  • Прикольно. Но, нужно отметить, что этот метод является эксперементальным. И даже у Моззилы пишут, через некоторое время от него могут отказаться. developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame 18 янв 2018 в 10:08
  • @Дмытрык Можно всё то же самое повесить на простой setInterval
    – Darth
    18 янв 2018 в 10:29
  • @Darth так как я писал в комментариях к вопросу? 18 янв 2018 в 10:32
  • 1
    @Дмытрык Тот случай, когда стоило попробовать написать ответ)
    – Darth
    18 янв 2018 в 10:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.