跳到正文
目录与搜索
⌘K

开始

更新日志

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:motion 14 成为 peer 依赖。
  • 新文档:每个原语一页,每个库一个标签。

v1 文档仍然保留在 v1.animate-ui.com。

从 v1 升级

先预览,再执行:

终端
bunx @animate-ui/cli@latest migrate all --dry-run
bunx @animate-ui/cli@latest migrate all

完整的迁移步骤与需要人工处理的项,见 CLI。