跳到主要内容

TypingAnimation

使用打字机效果逐字符显示文本动画。

VEF 专属组件。 不属于 Ant Design。

基础用法

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

export default function Demo() {
return <TypingAnimation>Hello, I am VEF Framework!</TypingAnimation>;
}

延迟启动

<TypingAnimation delay={500} duration={80}>
This text starts typing after 500ms...
</TypingAnimation>

滚动触发

<TypingAnimation startOnView>
This text types when it enters the viewport.
</TypingAnimation>

API

TypingAnimation 继承所有 motion.div 属性,并新增:

PropTypeDefault说明
childrenReactNode文本内容
durationnumber100每个字符之间的延迟(毫秒)
delaynumber0动画开始前的延迟(毫秒)
startOnViewbooleanfalse元素进入视口时开始动画
classNamestringCSS 类名
styleCSSProperties内联样式