代码之家 › 专栏 › 技术社区 › Joel Udd

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

nextjs13 framer-motion next.js

0

Joel Udd · 技术社区 · 2 年前

当我移动指针时,我试图添加一个跟随鼠标的元素。我正在使用动画的帧器运动,并使用了他们文档中的一个示例作为基础: Example from framer motion

当我把它添加到我的Next.js 13网站上,在那里我使用了新的应用程序目录,它变得非常滞后。 Example from my code

我觉得我的实现可能有问题,所以我尝试将它添加到另一个Next.js 13网站,该网站不使用应用程序目录,并且没有任何问题。

因此,问题似乎与新的应用程序目录有关。

在使用应用程序目录时,是否需要以另一种方式实现此功能?

0 回复 | 直到 2 年前

1

0

rguarascia.ts 2 年前

这本身并不是一个修复程序,但您不需要框架程序来完成此操作。您可以更改div以接收x和y,并对此进行转换。如果你想添加一个漂亮的过渡,你可以使用 cubic 。

例如,删除 translate 并离开 top 和 right 到 0 。

然后让div在 style 像这样

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

推荐文章

Marya · 如何防止useInView()和useScroll()帧器运动钩子同时启动?

1 年前

Milos Glamocak · useLocation()只能在<Router>组件的上下文中使用?

1 年前

Pruthviraj · 如何根据各自的id滚动图像

2 年前

Inzen · Framer Animation,使用AnimatePresence、motion.div和唯一关键点,我无法退出工作

2 年前

DJ101010 · 更改React中悬停文本的颜色

2 年前

DooMGuy096 · 简单的Framer运动动画在NextJS项目中不起作用

2 年前

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

2 年前