Swapping Text · Animate UI

安装

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

bun add @animate-ui/react motion

用法

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

import { SwappingText } from '@animate-ui/react/primitives/texts/swapping';

export function Visibility({ isPublic }: { isPublic: boolean }) {
  return <SwappingText text={isPublic ? 'Public' : 'Private'} />;
}

<SwappingText text={['Design', 'Develop', 'Deploy']} />

动效

• text 变化时按位置逐字比较，相同的字母保持不动，不同的字母在原位交替。
• 传入数组时每隔 duration 自动切换；减少动效下直接替换文本。

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

API

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

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