rc-texty
React TextyAnim Component
Example
http://localhost:8010/examples/
online example: http://react-component.github.io/texty/
install
Usage
var TextyAnim = require('rc-texty');
var React = require('react');
require('rc-texty/assets/index.css');
React.render(<TextyAnim>text</TextyAnim>, container);API
props
| 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 |
Inherit TweenOneGroup
| 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 |
License
rc-texty is released under the MIT license.