Abstract background

编程

Code the world!
7篇文章

在 Next.js 14 App Router 中实现页面切换的动画效果

在 React 中,由于缺乏组件卸载的生命周期钩子,实现元素退出动画较为困难。通常使用 Framer Motion 的 <AnimatePresence> 组件来包裹需要动画的组件以实现此功能。在 Next.js 中,虽然 Page Router 可以正常使用此方法,但 App Router 由于存在 bug,无法正确实现退出动画。解决这一问题的常见方法包括:1) 在路由切换时延迟 DOM 卸载,直到动画播放完毕;2) 修改所有 <Link> 的逻辑,先阻止跳转,动画结束后再通过 router.push() 触发跳转。然而,方法 2 不适用于浏览器前进 / 后退键触发的路由切换。

针对 Next.js 13 中 App Router 的问题,GitHub 上的 issue (vercel/next.js/issues/49279) 描述了在共享布局动画中出现的多个场景无法正常工作的情况,主要是因为 OuterLayoutRouter 组件的插入导致布局组件无法提供正确的退出动画。Stack Overflow 上的一个帖子提出了一个可行的解决方案,通过调整 Next.js 的渲染堆栈或公开导航开始时的 API 事件来解决。

具体的解决方案涉及创建一个 FrozenRouter 组件来保持页面切换过程中的上下文持久化,并使用 PageTransitionEffect 组件处理页面切换动画。此方法已在 Next.js 14.2.2 版本中验证有效。此外,有人基于此原理开发了 mekuri 库,进一步封装了这一解决方案,但其具体效果尚需测试。

Next.js  App Router  路由动画  Framer Motion  Page Transition  Layout Transition  页面切换动画  mekuri  React  HTML  CSS  Bug  
2024-05-30

填坑中…

Next.js 14 照片相册的实现与优化

React  Next.js  HTML  CSS  
2024-05-23

填坑中…

在 Windows 浏览器中实现 macOS 风格的滚动条

React  Next.js  HTML  CSS  
2024-05-15