用途:AutoAnimate 是 @formkit/auto-animate 提供的零配置动画库,为 DOM 元素的添加、移除和重排自动添加平滑过渡,适合列表过滤排序、手风琴展开收起、Toast 提示、表单校验消息等简单动画场景。
主要能力:框架无关,支持 React、Vue、Svelte 和原生 JS;零依赖,gzip 后约 3.28 KB;默认零配置,可选 duration(默认 250 毫秒)和 easing(默认 ease-in-out);自动遵循 prefers-reduced-motion 无障碍设置。
使用方式:安装命令为 pnpm add @formkit/auto-animate。React 中通过 useAutoAnimate 获取 ref 并挂到动画子元素的直接父级,列表项需使用唯一稳定 key。SSR 环境(如 Next.js、Cloudflare Workers)需用动态 import 在客户端调用,避免服务端报错。
限制与注意:父元素必须始终渲染,不能条件渲染;不要用 index 作 key;表格应作用于 tbody 而非单行;动画元素避免使用 flex-grow,改用显式宽度;父元素会自动获得 position: relative;Jest、esbuild、Vue/Nuxt、Angular 等环境需额外配置。复杂编排、手势、滚动或弹簧动画应改用 Motion。
资料未提供收费与价格信息。