跳到主要内容

FlipText 翻转文字

使用 GSAP 实现逐字符翻转动画效果的文字组件。

VEF 特有组件,不属于 Ant Design。

基础用法

import { FlipText } from '@vef-framework-react/components';

export default function Demo() {
return <FlipText>Hello World</FlipText>;
}

自定义动画

<FlipText duration={0.4} delayMultiple={0.05} repeat={2}>
动画文字
</FlipText>

API

属性类型默认值说明
childrenReactNode必填文字内容
durationnumber0.6每个字符的动画时长(秒)
delayMultiplenumber0.08字符间的交错延迟(秒)
repeatnumber0重复次数(0 = 一次,-1 = 无限)
classNamestringCSS 类名
styleCSSProperties内联样式