next.js 13应用程序目录中的鼠标滞后元素

kmb7vmvb 于 2023-04-11 发布在其他

关注(0)|答案(1)|浏览(134)

我试图添加一个元素，当我移动鼠标指针时，它会跟随鼠标移动。我使用帧运动来制作动画，并使用了他们文档中的一个示例作为基础：Example from framer motion
当我将它添加到我的Next.js 13网站时，我在那里使用新的应用程序目录，它变得非常滞后。
我想我的实现可能有问题，所以我尝试将其添加到另一个Next.js 13网站，该网站不使用应用程序目录，并且没有任何问题。
所以这个问题似乎与新的应用程序目录有关。
在使用app目录时，我是否需要以另一种方式实现此功能？

next.js

来源：https://stackoverflow.com/questions/75979491/element-following-mouse-lagging-in-next-js-13-app-directory

1条答案

按热度按时间

x6492ojm1#

这不是一个修复，本质上，但是你不需要框架来做这件事。你可以改变div来接受x和y，并在此基础上进行变换。如果你想添加一个漂亮的过渡，你可以使用立方体。
例如，从CSS中删除translate，并将top和right保留为0。
然后让div接受style中的x，y，如下所示

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

Codepen

赞(0）回复(0）举报 2023-04-11

我来回答

next.js 13应用程序目录中的鼠标滞后元素

1条答案

相关问题

热门标签

最新问答