开始
更新日志
Animate UI 2.0.0:从复制组件,改为替换原语。
2.0.0
Animate UI 现在是一个 npm 包。它不再复制 shadcn/ui 组件的动画版本,而是保留你的组件,替换它们所依赖的原语。
@animate-ui/react:Radix UI、Base UI 与 React Aria 的带动效原语,API 与对应库完全一致,额外提供transition/exitTransition。@animate-ui/cli:animate-ui animate <component>替换已安装 shadcn/ui 组件的 primitive import,并删除 Motion 取代的 CSS 动画,适配各种底座与风格;animate-ui migrate把 v1 项目迁到 v2,能自动改的 import 先改,v1 独有的部分列为手动步骤,最后才询问是否删除不再被引用的 v1 文件。- 新增 React Aria 支持;Radix Dialog 之上提供 Vaul 的直接替代品;不再支持 Headless UI。
AnimateUIProvider:一个tempo调快或调慢全部动画;checkAnimation选择画勾或弹勾,单选中的勾会从一项滑到另一项;reducedMotion决定减少动效如何应用。- 图标:Lucide 动画图标,新增 133 个,通过 shadcn 安装;核心来自
@animate-ui/react/icons,新增speed属性。 - 统一的动效规则:弹簧与短 ease-out 补间、退场快于入场、只动 transform 与 opacity、动画可打断、键盘操作不等动画、默认尊重减少动效。
- 新组件:Combobox、Context Menu、Drawer、Menubar、Navigation Menu、Pagination、Questionnaire、Select、Slider、Toast(凡是有这些组件的库都提供),以及 Input OTP、Scroll Fade、Sliding Text、Swapping Text;Sidebar 也支持 Base UI 与 React Aria。
- Hugeicons:Lucide 之外的第二套动画图标库。
- AI:Animate UI skill(
bunx skills add imskyleen/animate-ui)教 Claude Code、Cursor 或 Codex 用 Animate UI 的方式给任意组件加动效;animate-ui audit列出项目里的动画与各自的开销,供 skill 审查;每个 registry 文件都可以通过 shadcn MCP server 添加。 - 背景:新增 Topography 与 Glyph。动画背景在离屏与隐藏标签页时暂停,减少动效时显示静止帧,内容始终在上层并可点击。
- Registry:背景、图标与带样式的按钮(Liquid、Flip、GitHub Stars、Theme Toggler)都是通过 shadcn CLI 加入项目的文件,可以随意改样式;Code Block 还提供现成的 block。
- Motion 14:
motion14 成为 peer 依赖。 - 新文档:每个原语一页,每个库一个标签。
v1 文档仍然保留在 v1.animate-ui.com。
从 v1 升级
先预览,再执行:
bunx @animate-ui/cli@latest migrate all --dry-run
bunx @animate-ui/cli@latest migrate all完整的迁移步骤与需要人工处理的项,见 CLI。