用途:motion-v 面向 Vue 3,用 props 声明式驱动 DOM 与 SVG 动画,是 Motion(原 Framer Motion)的 Vue 移植版。包版本 2.4.4,MIT,仅 ESM,peer 依赖 vue>=3.0.0 与 @vueuse/core>=10.0.0,入口为 motion-v、motion-v/nuxt、motion-v/resolver;根入口再导出全部 framer-motion/dom,因此 animate、stagger、arc、缓动函数等来自 Motion 引擎。
主要能力:motion 是按 HTML/SVG 标签生成的类型化组件命名空间(如 motion.div、motion.svg)。可设置 initial、animate、exit、whileHover、whilePress、whileInView、whileFocus、whileDrag,值可取变体标签;animate 值变化即触发过渡。transition 配置时序、弹簧、延迟与 stagger,variants 搭配 custom 支持逐元素动态目标。可动画值含独立变换(x、y、scale、rotate、skewX)、颜色与 CSS 变量。
使用方式:npm install motion-v,在 script setup 中 import { motion } from 'motion-v',模板中用 : 前缀绑定 motion props。体积敏感时用 m 加 LazyMotion 替代 motion(motion 约 34kb,m 约 6kb;变体、手势、exit 载入 domAnimation,拖拽与布局载入 domMax,并设 strict)。
限制与注意:不要把 v-if 加在 AnimatePresence 自身,条件放到直接子元素;布局动画的变动 CSS 写到 :style 而非 :animate,borderRadius 与 boxShadow 需以 inline style 设置;可滚动祖先加 layoutScroll、固定定位祖先加 layoutRoot;在根 MotionConfig 设 reducedMotion="user"(默认 never);stagger 用 custom 配合动态变体,而非响应式计算的延迟。v2.0.0 移除了 focus、hover、press、inView 手势简写属性,改用 whileFocus、whileHover、whilePress、whileInView 及 onHoverStart 等事件属性。SVG 位置用 attrX、attrY、attrScale。
适用场景:Vue 3 项目中的进入退出、错峰、拖拽、滚动联动、useAnimate、共享布局、Reorder 列表、指令(v-motion)与 Nuxt 集成。官方文档 https://motion.dev/docs/vue,仓库 https://github.com/motiondivision/motion-vue。其余细节(如具体收费、平台支持范围)暂未提供。