将绝对坐标与变换转换一起使用

Question

我可以用以下内容制作一个跟随鼠标的框。

document.addEventListener('mousemove', (e) => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});

.box {
  width: 50px;
  height: 50px;
  
  background-color: blue;
  
  transform: translate(calc(var(--mouse-x) - 50%), calc(var(--mouse-y) - 50%));
}

<div class="box"></div>

但只要元素不在左上角，它就会中断。

document.addEventListener('mousemove', (e) => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});

.box {
  width: 50px;
  height: 50px;
  
  margin-left: 150px;
  
  background-color: blue;
  
  transform: translate(calc(var(--mouse-x) - 50%), calc(var(--mouse-y) - 50%));
}

<div class="box"></div>

如何在变换中使用绝对坐标？我不想使用 left/top/position: fixed/absolute 因为我需要保留元素在流中的位置。

我可以使用 JavaScript 来获取中心位置，然后使用该信息来获取正确的中心。

document.addEventListener('mousemove', (e) => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});

window.addEventListener('load', (e) => {
    const box = document.querySelector('.box');
    const rect = box.getBoundingClientRect();
    box.setAttribute('style', `
      --center-x: ${rect.left + (rect.width / 2)}px;
      --center-y: ${rect.top + (rect.height / 2)}px;
    `);
});

.box {
  width: 50px;
  height: 50px;
  
  margin-left: 150px;
  
  background-color: blue;
  
  transform: translate(calc(var(--mouse-x) - var(--center-x)), calc(var(--mouse-y) - var(--center-y)));
}

<div class="box"></div>

这可行，但如果页面中的其他任何内容发生变化，它并不理想并且很容易被破坏。它也会随着更多元素而减慢，我希望它尽可能快。有更好的方法吗？我可以使用 CSS/Vanilla JS。

Answer 1

您不必使用translate()，我建议您在CSS 中使用left 和top 属性。它们可以帮助您根据坐标定位元素。

window.addEventListener('load', (e) => {
    const box = document.querySelector('.box');
    const rect = box.getBoundingClientRect();
    document.addEventListener('mousemove', (e) => {
    box.style.left = e.pageX + 'px';
    box.style.top = e.pageY + 'px';
});
});

.box {
  width: 50px;
  height: 50px;
  position:absolute;
  transform:translate(-50%,-50%);
  background-color: blue;
}

<div class="box"></div>

transform: translate() 属性相对于框的大小起作用，但 left 和 top 属性不起作用。在某些情况下它也可以更快，因为在您的代码中进行了大量计算。然而，这很简单。

Answer 2

这是使用requestAnimationFrame() 函数的解决方案。 requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。对于更高刷新率的显示器，此函数将运行更多次以匹配刷新率。

更多信息here

这是可行的解决方案：

const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
let mouseX = 0;
let mouseY = 0
document.addEventListener('mousemove', (e) => {
  mouseX = e.pageX + 'px';
  mouseY = e.pageY + 'px';
})

function mouseMove() {
  box.style.left = mouseX;
  box.style.top = mouseY;
  requestAnimationFrame(mouseMove)
};
mouseMove()

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: blue;
}

<div class="box"></div>