rc-texty

rc-texty

React TextyAnim Component
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !npm downloaddownload-imagedownload-url

Example

http://localhost:8010/examples/
online example: http://react-component.github.io/texty/

install

Usage

var TextyAnim = require('rc-texty');
var React = require('react');
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.