Auto Height · Animate UI

内容高度变化时，容器高度自动弹到新的内容高度，并在移动中裁剪溢出内容。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

auto-height.tsx

import { AutoHeight } from '@animate-ui/react/primitives/effects/auto-height';

export function Details({ expanded }: { expanded: boolean }) {
  return (
    <AutoHeight deps={[expanded]}>
      {expanded ? <LongContent /> : <ShortContent />}
    </AutoHeight>
  );
}

动效

高度以 stiffness 300 / damping 30 的弹簧追随内容，不过冲，移动时裁剪内容。
内容在外部加载完成或增删时同样生效；减少动效下直接跳到新高度。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
asChild	`boolean`	`false`
deps	`React.DependencyList`	`[]`
transition	`Transition`	`{ type: 'spring', stiffness: 300, damping: 30, bounce: 0, restDelta: 0.01 }`
animate	`TargetAndTransition \| LegacyAnimationControls`	`—`
children	`React.ReactNode`	`—`
…props	`Omit<HTMLMotionProps<'div'>, 'animate'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。