Zoom · Animate UI

入场原语：在加载或进入视口时把元素从缩小状态放大到位。

安装

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

终端

bun add @animate-ui/react motion

用法

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

zoom.tsx

import { Zoom, Zooms } from '@animate-ui/react/primitives/effects/zoom';

export function Hero() {
  return (
    <>
      <Zoom>
        <h1>Animated primitives for React</h1>
      </Zoom>

      {/* Staggered: each child starts 100ms after the previous one. */}
      <Zooms holdDelay={100}>
        <Card />
        <Card />
        <Card />
      </Zooms>
    </>
  );
}

动效

元素从 initialScale（默认 0.5）放大到 scale，弹簧 stiffness 200 / damping 20，约 2% 过冲。
以 transform 完成，不影响布局；减少动效下直接呈现。

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

API

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

属性	类型	默认值
asChild	`boolean`	`false`
initialScale	`number`	`0.5`
scale	`number`	`1`
delay	`number`	`0`
transition	`Transition`	`{ type: 'spring', stiffness: 200, damping: 20 }`
inView	`boolean`	`false`
inViewOnce	`boolean`	`true`
inViewMargin	`string`	`'0px'`
…props	`HTMLMotionProps<'div'>`	`—`
children	`React.ReactElement \| React.ReactElement[]`	`—`
holdDelay	`number`	`0`
…props	`ZoomProps`	`—`

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

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