Motion 动画示例速查：从通知退场到灯箱转场

Motion 动画示例速查从通知退场到灯箱转场【免费下载链接】motionA modern animation library for React and JavaScript项目地址: https://gitcode.com/GitHub_Trending/mo/motion列表里删掉一行剩余的行不会补位、生硬跳了一下用户会顿住半秒。这是布局过渡的典型场景Motion面向 React 和 JavaScript 的开源动画库用 layout 追踪和共享元素转场把它解决掉仓库里也备好了可直接抄的示例。三步跑通第一个动画第 1 步装包。React 和 JavaScript 用同一个包Vue 项目用motion-vnpm install motion各平台的最小用法在 README.md 的安装区块里都有对照。第 2 步写最小动画。把div换成motion.div加一个animate属性就能动import { motion } from motion/react motion.div animate{{ x: 100 }} transition{{ duration: 1 }} /对应示例是 Animation-animate.tsx它用 state 在 0 和 100 之间来回切 x改这一个文件就能理解整条链路。第 3 步本地跑起来。所有示例挂在 Vite 示例工程里dev/react是 React 版# 在 dev/react 目录下 yarn dev起服务后逐个点开示例比读文档直观。按业务场景挑模板示例不按手势/布局这种技术词分类按你明天要做的场景去找更省事文件都在 dev/react/src/examples/。通知列表怎么加进出场删掉一条时它缩小消失后面的通知上移补位新的从底部弹入。关键是每条加layout容器套AnimatePresencemotion.li layout exit{{ opacity: 0, scale: 0.5 }} /参考 AnimatePresence-notifications-list.tsx它还带了侧滑删除弹出式 toast 变体在 dev/react/src/tests/animate-presence-pop.tsx。缩略图怎么过渡到大图点缩略图时它飞出来放大到中间背景遮罩淡入关闭时原路飞回。原理是给缩略图和大图赋同一个layoutId共享元素转场就成立了motion.div layoutId{id} /参考 Shared-layout-lightbox.tsx要交叉淡入淡出而不是直接替换看 Shared-layout-lightbox-crossfade.tsx。列表拖拽排序怎么实现拖动某一行时其他行实时让位松手后回弹归位。Reorder.Group加Reorder.Item把这套逻辑全包了Reorder.Group axisy values{items} onReorder{setItems}一维列表参考 Drag-to-reorder.tsx二维网格版是 Reorder-grid.tsx。两个组件怎么切换不闪白key 一变旧组件走完 exit、新组件同时进场中间不出现空窗。把会变的组件放进AnimatePresence切换只靠改 keyAnimatePresence motion.div key{key} exit{{ opacity: 0 }} / /AnimatePresence参考 AnimatePresence-switch.tsx单文件四十行以内适合当骨架抄。折叠面板高度怎么从 0 展开到 auto面板动画的难点在height: auto没法直接插值。示例的解法是用 variants 在height: 0和height: auto两个状态间切外层overflow: hidden兜底variants{{ open: { height: auto }, collapsed: { height: 0 } }}参考 Animation-height-auto-display-none.tsx。容易踩的坑⚠️退场动画不播放。现象是 item 从 state 里移除后直接消失没有 exit。原因是AnimatePresence里的子组件缺少稳定key或者组件根本没渲染在它内部Motion 对不上上一个还在的实例。解法是检查 map 里是否传了 key以及所有进出场的兄弟节点是否都在同一个AnimatePresence下断言方式可以参考 dev/react/src/tests/animate-presence-exit-complete-multiple.tsx。⚠️导入路径还停留在 framer-motion。现象是照网上老教程写import from framer-motion但仓库已改名 MotionREADME 里明确标注 React 入口改为motion/react。原因是包已更名旧入口只作兼容保留。解法是统一写成import { motion } from motion/react。顺带提醒examples 目录里不少旧示例比如 Animation-animate.tsx仍写着 framer-motion 的 import复制到自己项目时记得改。⚠️height: auto 的动画不符合预期。现象是想从display: none直接展开到auto高度会跳。原因是 CSS 层面 auto 不可插值示例文件头部也注明了这个方向 Currently broken。解法是避开 display 切换固定用height: 0到height: auto的两态 variants再用transitionEnd收尾测试断言可对照 dev/react/src/tests/animate-height.tsx。四周上手路线第 1 周熟悉 animate / initial / transition 三个属性跑通 Animation-animate.tsx 和 Animation-transition-tween.tsx。第 2 周把 AnimatePresence 的退出动画做熟重点看多子组件的退出时序对照 dev/react/src/tests/animate-presence-exit-complete-multiple.tsx。第 3 周学 layout 与 layoutId 共享元素转场把 Shared-layout-lightbox.tsx 的结构抄进自己的项目。第 4 周接触手势drag与底层 View 时间线 APItests/animate/ 目录下的用例覆盖了暂停、跳转时间等操作。上面是测试截图把 View 时间线暂停并跳到指定时刻后元素停在动画的中间状态这正是可寻址时间线和只能播放的 CSS 动画的区别。提问与贡献的入口报 bug 和提需求走 GitHub Issues按 CONTRIBUTING.md 的约定认领 bug 前先在 issue 下留言避免两人改同一处。新特性要先提 Feature Proposal评审过 API 再动手写代码。动手前建议翻一下 plans/ 目录那里有团队正在推进的模块规划和历史 issue 记录能少踩重复的坑。打开 dev/react/src/examples/挑一个和你下一个项目对得上的文件比如通知列表或灯箱先复制进去改配色再改动画参数。写完之后用同名的 tests 文件做对照能看出示例到底依赖哪几个属性。【免费下载链接】motionA modern animation library for React and JavaScript项目地址: https://gitcode.com/GitHub_Trending/mo/motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考