Rc-texty NPM | npm.io

rc-texty

React TextyAnim Component

var TextyAnim = require('rc-texty');
var React = require('react');
React.render(<TextyAnim>text</TextyAnim>, container);

name	type	default	description
className	string	`null`	class name.
prefixCls	string	`texty`	prefix class
type	string	`top`	animation style, 'left' \| 'right' \| 'top' \| 'bottom' \|'alpha' \| 'scale' \| 'scaleX' \| 'scaleBig' \| 'scaleY' \| 'mask-bottom' \| 'mask-top' \| 'flash' \| 'bounce' \| 'swing' \| 'swing-y' \| 'swing-rotate'.
mode	string	`smooth`	animate sport mode. 'smooth' \| 'reverse' \| 'random' \| 'sync'
duration	number \| func	`450`	Except for special animation 'flash' \| 'bounce' \| 'swing' \| 'swing-y' \| 'swing-rotate'. one text animation duration
interval	number \| func	`50`	animation interval, is function: (e: { key: string }) => number. Key is split text plus sequence(text-1).
delay	number	`0`	animation overall delay.
split	func	`null`	children split, return string

name	type	default	description
appear	boolean	true	whether support appear anim
enter	object / array / func	`null`	enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim
leave	object / array / func	`null`	leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim
onEnd	func	-	one animation end callback
animatingClassName	array	`['tween-one-entering', 'tween-one-leaving']`	className to every element of animating
exclusive	boolean	false	Whether to allow a new animate to execute immediately when switching. `enter => leave`: execute immediately leave
component	React.Element/String	div	component tag
componentProps	object	-	component tag props

rc-texty is released under the MIT license.