一个简单的React文字效果组件
CSS3实现
type = 0 淡入淡出:
type = 1 大小模糊改变:
type = 2 大小改变:
type = 3 伸缩:
type = 4 上下改变:
type = 5 3D翻转:
npm install react-words --save
import Words from 'react-words';
<Words
show={true/false} // 必填 控制显示或隐藏 默认false
type={0/1/2/3/4/5} // 选择一种动画效果 默认0
speed={300} // 动画的速度 默认300(毫秒)
>Hello World!</Words>
show # boolean 必填 控制显示还是隐藏,true/false,通过改变这个值来触发动画效果
type # number 选择一种动画效果 0/1/2/3/4/5,默认0
speed # number 单个文字的动画执行速度 默认300,单位ms
文字不要太多了,文字越多,执行一次动画所需的时间就越长