#motiondivision/motion-vue `motion-v` **版本：** 2.0.0（2026 年 2 月） **负责人：** framer-motion@^12.29.2、hey-listen@^1.0.8、motion-dom@^12.29.2、motion-utils@^12.29.2 **标签：** 最新：2.0.0（2026 年 2 月） **参考文献：** [文档]() — API 参考、指南 ## API 变更本节记录了特定于版本的 API 更改 - 优先考虑最近的主要/次要版本。 * 破坏：`focus`、`hover`、`press`、`inView` 速记属性 — 在 v2.0.0-beta.1 中删除。使用“whileFocus”、“whileHover”、“whilePress”和“whileInView”来实现动画，使用完整的事件处理程序（例如“@hoverStart”、“@pressStart”）来实现逻辑[来源]() * 新：`v-motion`指令 - v2.0.0-beta.1中的新指令，可以在任何元素上启用声明式动画，而不需要``组件包装器[源]() * 重大事件：仅限 ESM — v2.0.0-beta.1 放弃了 CommonJS 支持。该软件包现在仅提供 ESM (`.mjs`) 导出 [源]() * 新功能：`MotionPlugin` — v2.0.0-beta.1 中的新功能，用于全局 `v-motion` 和自定义预设指令注册的 Vue 插件 * 新功能：`createPresetDirective()` — v2.0.0-beta.1 中的新功能，允许使用内置运动选项创建可重用的动画指令 * 突破性：`AnimatePresence` 延迟发现 - v2.0.0-beta.1 重构为使用 `data-ap` 属性进行延迟发现，而不是急切注册 [来源]() * 已弃用： `staggerChildren` 和 `staggerDirection` — 在 v1.4.0 中已弃用，转而在 `transition` 属性中使用 `stagger()` 实用程序 [源]() * 新功能： `stagger()` 实用程序 - 自 v1.7.0 以来，正确处理新进入的兄弟姐妹与现有兄弟姐妹的交错[来源]() * 新功能： `useTransform` 输出映射 — 自 v1.9.0 起支持为复杂坐标转换提供多个输出值映射 [来源]() * 新功能：“Reorder”自动滚动 - 自 v1.8.0 起，当“Reorder.Item”被拖动到边缘时，支持自动父容器滚动 [源]() * 新功能：`useScroll` VueInstance 支持 - 自 v1.6.0 起，`container` 和 `target` 选项现在接受 `VueInstance`（参考组件）[源]() * 新功能： `useInView` `root` 选项 - 自 v1.6.0 起现在接受 `MaybeRef` 进行动态根元素分配 [来源]() * 新功能：“AnimatePresence”直接子组件 - 自 v1.10.0 起支持多个直接“motion”组件作为子组件 [来源]() * 新功能： `delayInMs` — 自 v1.6.0 起导出为独立实用函数，用于基于时间的动画延迟 [来源]() **还更改了：** `useTransform` 反应式更新修复 (v1.2.1) · 相对开始处的 `sequence` (v1.3.0) · `AnimatePresence` 自定义道具修复 (v1.3.0) · `motionGlobalConfig` 导出 (v2.0.0-beta.1) · `FeatureBundle` 树摇动架构 (v2.0.0-beta.1) ## 最佳实践 * 使用 `LazyMotion` \+ `m` 组件代替 `motion` 将初始包从 ~34kb 减少到 ~6kb — 加载 `domAnimation` (+18kb) 用于变体/退出/手势，或在您还需要拖动和布局动画时加载 `domMax` (+28kb)。添加 `:strict="true"` 以在开发时捕获 `LazyMotion` 中意外的 `motion` 导入 [来源]() * 使用 `` 渲染实时运动值输出，而不是同步到 Vue 状态 — `RowValue` 直接写入 `innerHTML` 并绕过 Vue 的反应周期，使快速变化的值远离渲染路径[来源]() * 在应用程序根目录的 `MotionConfig` 上设置 `reducedMotion="user"` — 默认为 `"never"`，这意味着无论操作系统可访问性设置如何，变换和布局动画都会运行，除非您明确选择加入[来源]() * 对于布局动画，将更改的 CSS 应用于 `:style` （不是 `:animate`），并让 `layout` 属性处理过渡 - 如果该值放置在 `:animate` 中，Motion 的 FLIP 测量将与之冲突[来源]() * 通过 `layout` 动画元素上的 `:style` （不是 CSS 类）设置 `borderRadius` 和 `boxShadow` — 仅当这些属性设置为内联样式运动值时，运动才会自动校正这些属性的比例失真[来源]() * 将 `layoutScroll` 添加到可滚动容器祖先，并将 `layoutRoot` 添加到布局动画元素的固定位置祖先 - 如果没有这些道具，当滚动偏移或视口偏移非零时，Motion 会错误地测量子位置[来源]() * 切勿将 `v-if` 放在 `AnimatePresence` 本身上 - 如果它卸载，它无法拦截其子级的退出。条件必须针对直接子代： <组件/> [来源]() * 使用带有 `custom` 属性的动态变体来实现每个元素的交错，而不是在反应式 Vue 状态下计算延迟 - 将 `:custom="index"` 传递给每个 `motion` 组件并解决变体函数内的延迟，保持交错逻辑声明性和无分配[来源]() * 对于在多个子项中使用的值，优先选择 `useMotionValue` 而不是 CSS 变量动画 — CSS 变量动画总是会在每一帧上触发绘制，而传递给 `:style` 的 `MotionValue` 会在 Motion 优化的 DOM 渲染器中运行，而不会影响 Vue 渲染周期[来源]() * 使用“v-motion”指令（v2.0.0-beta.1 中的新增功能）将动画添加到任何原生 HTML 或 SVG 元素，无需包装器“”组件 - 通过“app.use(MotionPlugin)”进行全局注册，或通过“createMotionDirective”按组件进行注册。通过“presets”选项注册可重用的动画预设，以创建项目范围的速记指令，例如“v-fade-in”[源]()

运动V技能

包含技能