next.js 13 app目录中紧跟鼠标滞后的元素

Question

我试图添加一个元素，当我移动指针时跟随鼠标。我使用帧运动的动画，并使用了一个例子，从他们的文档为基础:来自帧运动的例子

当我将它添加到我的Next.js 13网站时，我使用新的应用程序目录，它变得非常滞后。示例从我的代码

我想我的实现可能有问题，所以我试着把它添加到另一个Next.js 13网站，不使用应用程序目录，并且没有任何问题。

所以问题似乎与新的应用程序目录有关。

我需要在使用app目录时以另一种方式实现这一点吗?

Answer 1

这本身不是一个修复，但是你不需要framer来做这个。你可以改变div来加入x和y然后对它进行变换。如果你想添加一个漂亮的过渡，你可以使用立方。

例如，将translate从CSS中移除，将top和right留给0。

然后让div在style中包含x,y，像这样

<div
ref={ref}
className="mousefollow"
style={{
transform: `translate(${x}px, ${y}px)`,
}}/>

Codepen