nextjs14 framer-motion 构建你的酷炫页面切换动画效果

使用framer-motion 构建跟国外大佬一样的酷炫页面效果 主要实现功能

• 通过next-themes 切换页面主题色
• frmer-motion 实现动画切换效果 首先预览下静态效果，动态切换效果请直接访问vercel部署地址

移动端适配

实现思路主要使用到 framer-motion 中的 AnimatePresence 因为使用AnimatePresence，可以对当组件从 React 树中移除时，对其进行动画处理。我们场景就是切换页面退出及进入有复杂的的效果。 主要问题在react本身无法检测dom卸载的声明周期。

1. 当组件要被卸载时通知组件
2. 允许他们推迟卸载，直到操作完成（例如动画）。

我们如果想通过使用生命明周期来完成那是不太可能的，所以framer-motion 中的 AnimatePresence AnimatePresence 通过检测直接子节点 何时从 React 树中删除来工作。 在整个树最终从 DOM 中删除之前，被删除的子级包含的任何motion具有 prop 的组件都会触发该动画

使用到技术栈

1. nextjs14
2. framer-motion
3. next-ui

github地址 github.com/batmanSix/n…

vercel部署 （访问需vpn） nextjs14-website-responsive.vercel.app