react-motion-layout 与 react-router-dom 无缝集成RouterLink 打造 Instagram 式 Hero 转场【免费下载链接】react-motion-layout Beautiful immersive React hero animations.项目地址: https://gitcode.com/gh_mirrors/re/react-motion-layoutreact-motion-layout 是一个专为 React 打造的共享元素动画库它能与 react-router-dom 无缝集成让你用一行 RouterLink 就能实现 Instagram 式的 Hero 转场动画——列表页的图片点击后平滑飞入详情页带来沉浸式视觉体验。为什么需要跨路由的 Hero 转场大多数动画库如 framer-motion擅长处理组件的挂载/卸载动画但遇到这类场景就会无能为力列表页和详情页使用同一张图片但位置和尺寸不同点击卡片进入详情时希望图片从原位置连续变形到详情页的大图位置退出时动画反向回放回到列表页原位这正是 Instagram、Pinterest 等产品标志性的 Hero 动画。react-motion-layout 的核心理念就是把两个路由中的组件关联起来在切换视图时一起动画。它的主要优势特性说明 声明式只需把图片或文字包进 SharedElement 组件即可 路由友好内置 RouterLink点击链接自动触发转场 零依赖不需要额外的状态管理库 兼容性好支持 Chrome 56、Firefox 27、Safari、Edge 等主流浏览器核心组件全景要打通路由转场react-motion-layout 提供了 4 个关键角色MotionLayoutProvider应用根级 Provider建立全局动画上下文MotionScreen把当前路由视图标记为一个屏幕帮助系统识别要动画的元素MotionScene编排动画、管理共享元素的相对位置与滚动同步RouterLink封装 react-router-dom 的 Link点击时先派发退场动画再跳转这些组件都在 src/index.js 中统一导出源码位于 src/components/RouterLink.jsx。RouterLink一个链接搞定转场RouterLink 本质上是 react-router-dom 的 Link 增强版。它的使用方式几乎零成本——把Link换成RouterLink即可import { RouterLink, MotionScreen, MotionScene, SharedElement } from react-motion-layout; RouterLink to/posts/1 SharedElement.Div animationKeyhero-1 img src... / /SharedElement.Div /RouterLink它背后做了什么查看 src/components/RouterLink.jsx 的 onClick 逻辑流程非常巧妙拦截默认跳转行为e.preventDefault()按屏幕名对当前已注册的场景分组仅当当前屏幕只有一个 MotionScene 时派发view.setExitView动作标记退场元素最后调用history.push完成真正的路由跳转详情页加载后同名的 SharedElement 会自动识别源位置播放飞行进场动画。还支持replacereplace 而非 push、to传函数动态计算目标路由等用法。三步接入你的项目第 1 步安装依赖需要 React 16.8一条命令装齐npm i react-router-dom react-motion-layout --save第 2 步列表页——标记屏幕与共享元素用MotionScreen包裹页面用SharedElement包裹需要转场的元素并保证animationKey在两个页面一致MotionScreen namelist MotionScene namelist RouterLink to/posts/1 SharedElement.Image animationKeyhero-1 src... / /RouterLink /MotionScene /MotionScreen第 3 步详情页——同 Key 自动接棒MotionScreen namedetail MotionScene namedetail scrollUpOnEnter SharedElement.Image animationKeyhero-1 src... / /MotionScene /MotionScreen页面跳转时animationKeyhero-1的两个元素就被关联起来完成从缩略图到大图的连续过渡。关键 Props 速查表MotionScreen详见 website/docs/motionScreen.mdProp类型说明namestring屏幕标识用于多场景路由定位onEnter / onExitboolean是否播放进/退场动画默认 true可做单向动画MotionScene详见 website/docs/motionScene.mdProp类型说明namestring必填场景唯一标识easingstring自定义缓动曲线scrollUpOnEnterboolean进场时滚动到顶部详情页必备SharedElement提供Image、Text、Div三种元素Div可动画 borderRadius、背景、位置、尺寸、阴影适合卡片整体转场详见 website/docs/sharedElementDiv.md。常见问题与最佳实践Q为什么动画没触发检查两点① 两个页面是否都用MotionScreen包裹② 当前屏幕是否只有一个MotionScene——RouterLink 源码中明确要求num[store.screen].length 1才派发退场动作。一个屏幕含多个场景时需配合MotionScreen的name让系统定位。Q详情页有滚动怎么办给详情页的MotionScene加上scrollUpOnEnter避免进场动画起点偏移。Q只想播放单向动画设置onEnter{false}或onExit{false}例如列表页退出时不回放动画。总结react-motion-layout 用最小的 API 面解决了跨路由共享元素转场这一痛点MotionScreen定义舞台、MotionScene编排动画、SharedElement标记元素、RouterLink一键触发。四者配合 react-router-dom即可用不到 20 行代码为 React 应用加上 Instagram 级的沉浸感 。【免费下载链接】react-motion-layout Beautiful immersive React hero animations.项目地址: https://gitcode.com/gh_mirrors/re/react-motion-layout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考