javascript - JavaScript el.animate() 中的奇怪翻译

Question

我尝试在 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>

Answer 1

您必须包括“从”和“到”点的“坐标”。要获得“从”点，您必须将鼠标坐标存储在点击处理程序之外，如下所示:

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>