Я пытаюсь анимировать элемент в JavaScript. Моя цель - переместить элемент из его текущей позиции в курсор. Я не могу понять, почему элемент движется не так, как ожидалось. X-перевод в порядке, но Y-перевод идет в неправильном направлении.

document.addEventListener('click', function(event) {
    document.getElementById("el").animate([
        { top: (event.clientY)+'px' },
        { left: (event.clientX)+'px' }        
    ], 
    { 
        // timing options
        duration: 1000,
        fill: 'forwards',                
    });
})
#el {
    position:absolute;
    top: 10px;
    left: 10px;
    background-color: cyan;
}
<div id="el">Click to move</div>
4
Fifi 22 Ноя 2020 в 23:32

4 ответа

Лучший ответ

Вы должны включить «координаты» точек «от» и «до». Чтобы получить точку "от", вы должны сохранить координаты мыши вне обработчика кликов, например:

const coords = {
  x: 10,
  y: 10
};
document.addEventListener('click', function(event) {
  document.getElementById("el").animate([{
      top: coords.y + 'px',
      left: coords.x + 'px'
    },
    {
      top: (event.clientY) + 'px',
      left: (event.clientX) + 'px'
    }
  ], {
    // timing options
    duration: 1000,
    fill: 'forwards',
  });
  coords.x = event.clientX;
  coords.y = event.clientY;
});
#el {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: cyan;
}
<div id="el">Click to move</div>
1
Teemu 22 Ноя 2020 в 21:05

Я рекомендую использовать transform поверх left или сверху. Потому что с преобразованием у вас есть дополнительное ускорение графического процессора, которое увеличивает FPS

document.addEventListener('click', function(event) {
  document.getElementById("el").animate([
    { transform: `translate(${event.clientX - 10}px ,${event.clientY - 10}px)` } 
  ], 
  { 
    duration: 1000,
    fill: 'forwards',                
  });
})
#el {
      position:absolute;
    top: 10px;
    left: 10px;
      background-color: cyan;
      cursor: default;
}
<div id="el">Click to move</div>
1
Ifaruki 22 Ноя 2020 в 21:14

И это решение от меня. Добавьте правило transition в свой CSS для анимации.

#el {
    position:absolute;
    top: 10px;
    left: 10px;
    background-color: cyan;
      
    transition: 1s; /*add this it*/
}
document.addEventListener('click', function(event) {
   let el = document.getElementById('el');
    el.style.left = event.clientX + "px";
    el.style.top = event.clientY + "px";   
});
#el {
    position:absolute;
    top: 10px;
    left: 10px;
    background-color: cyan;
      
    transition: 1s; /*add this it*/
}
<div id="el">Click to move</div>
1
sergey kuznetsov 22 Ноя 2020 в 21:26

Не используйте анимацию в JavaScript, а в CSS.

document.addEventListener('click', function(event) {
 document.getElementById("el").style.top = event.clientY + "px";
 document.getElementById("el").style.left = event.clientX + "px";
})
#el {
      position: absolute;
      transition: all 1s;
      left: 10px;
      top: 10px;
      background-color: cyan;
}
<div id="el">Click to move</div>
0
Colin Chadwick 22 Ноя 2020 в 21:15
64959240