转账光雾确认

转账详情在粉金色光雾与上浮粒子后逐渐虚化，经过两段处理提示，再恢复为清晰的成功状态。

弹窗转场六框架TypeScript

演示

点击发送，体验确认、处理与成功流程；关闭或按 Escape 取消，从 Convert 重新打开。仅为本地动效演示。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

TransferGlow.tsx

正在加载代码…

App.tsx

import { TransferGlow } from "./TransferGlow";

export default function App() {
  return <TransferGlow />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.open` 打开或关闭本地弹窗；重新打开时重置流程。	`boolean`	`true`
`options.amount` 展示的转账金额，不执行真实付款。	`string`	`"100,000.00"`
`options.account` 付款账户名称。	`string`	`"Grain USD account"`
`options.recipient` 详情和成功提示中的收款人名称。	`string`	`"Müller Logistik GmbH"`
`options.receivedAmount` 收款金额文字，不含末尾 EUR。	`string`	`"€92,000.00"`
`options.duration` 本地处理动画时长，单位毫秒，范围1200–15000。	`number`	`5200`
`options.onComplete` 本地流程完成后回调一次；取消的流程不触发。	`() => void`
`options.onOpenChange` 用户打开或关闭弹窗时触发。	`(open: boolean) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`840`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`