跳到主要内容

TypingAnimation 打字动画

逐字符显示文字的打字机效果动画组件。

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

基础用法

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

export default function Demo() {
return <TypingAnimation>你好,我是 VEF Framework!</TypingAnimation>;
}

带延迟

<TypingAnimation delay={500} duration={80}>
500ms 后开始打字...
</TypingAnimation>

滚动触发

<TypingAnimation startOnView>
进入视口时开始打字动画。
</TypingAnimation>

API

TypingAnimation 继承所有 motion.div 属性,另有:

属性类型默认值说明
childrenReactNode文字内容
durationnumber100每个字符的间隔(毫秒)
delaynumber0动画开始前的延迟(毫秒)
startOnViewbooleanfalse元素进入视口时才开始动画
classNamestringCSS 类名
styleCSSProperties内联样式