Click · Animate UI

安装

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

bun add @animate-ui/react motion

用法

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

import * as React from 'react';
import { Click } from '@animate-ui/react/primitives/effects/click';

export function Canvas() {
  const ref = React.useRef<HTMLDivElement>(null);

  return (
    <div ref={ref}>
      <Click scope={ref} variant="ring">
        <p>Click anywhere</p>
      </Click>
    </div>
  );
}

动效

• 指针抬起时在点击位置播放，默认持续 400ms，然后从 DOM 移除。
• variant="particles" 时粒子依次出发，结束时间略晚于其他形态。

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

API

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

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

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