Flip Button · Animate UI

安装

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

bun add @animate-ui/react motion
bunx shadcn@latest add @animate-ui/buttons-flip

用法

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

import {
  FlipButton,
  FlipButtonBack,
  FlipButtonFront,
} from '@/components/animate-ui/buttons/flip';

export function Subscribe() {
  return (
    <FlipButton from="top">
      <FlipButtonFront>Subscribe</FlipButtonFront>
      <FlipButtonBack>It's free</FlipButtonBack>
    </FlipButton>
  );
}

动效

• 悬停时正面旋转 90° 并淡出，同时背面从指定方向翻入，弹簧 stiffness 280 / damping 20，越过终点后回摆。
• 离开时沿原路翻回；减少动效下直接切换正反面。

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

API

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

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

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