rc-texty

React TextyAnim Component

Example

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.