|
1 | | -# rc-queue-anim |
2 | | ---- |
3 | | - |
4 | | -Animate React Component in queue, thanks to [rc-animate](https://github.com/react-component/animate) and [enter-animation](https://github.com/jljsj33/enter-animation). |
5 | | - |
6 | | -[![NPM version][npm-image]][npm-url] |
7 | | -[![build status][travis-image]][travis-url] |
8 | | -[![Test coverage][coveralls-image]][coveralls-url] |
9 | | -[![Total alerts][lgtm-alerts-image]][lgtm-alerts-url] |
10 | | -[![Language grade: JavaScript][lgtm-grade-image]][lgtm-grade-url] |
11 | | -[![node version][node-image]][node-url] |
12 | | -[![npm download][download-image]][download-url] |
13 | | - |
14 | | -[npm-image]: http://img.shields.io/npm/v/rc-queue-anim.svg?style=flat-square |
15 | | -[npm-url]: http://npmjs.org/package/rc-queue-anim |
16 | | -[travis-image]: https://img.shields.io/travis/react-component/queue-anim.svg?style=flat-square |
17 | | -[travis-url]: https://travis-ci.org/react-component/queue-anim |
18 | | -[coveralls-image]: https://img.shields.io/coveralls/react-component/queue-anim.svg?style=flat-square |
19 | | -[coveralls-url]: https://coveralls.io/r/react-component/queue-anim?branch=master |
20 | | -[lgtm-alerts-image]: https://img.shields.io/lgtm/alerts/g/react-component/queue-anim.svg?logo=lgtm&logoWidth=18&style=flat-square |
21 | | -[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/queue-anim/alerts/ |
22 | | -[lgtm-grade-image]: https://img.shields.io/lgtm/grade/javascript/g/react-component/queue-anim.svg?logo=lgtm&logoWidth=18&style=flat-square |
23 | | -[lgtm-grade-url]: https://lgtm.com/projects/g/react-component/queue-anim/context:javascript |
24 | | -[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square |
25 | | -[node-url]: http://nodejs.org/download/ |
26 | | -[download-image]: https://img.shields.io/npm/dm/rc-queue-anim.svg?style=flat-square |
27 | | -[download-url]: https://npmjs.org/package/rc-queue-anim |
28 | | - |
29 | | -## Example |
30 | | - |
31 | | -http://react-component.github.io/queue-anim/examples/ |
32 | | - |
33 | | - |
34 | | - |
35 | | -## Usage |
36 | | - |
37 | | -```js |
38 | | -import QueueAnim from 'rc-queue-anim'; |
39 | | -import React from 'react'; |
40 | | -import ReactDom from 'react-dom'; |
41 | | - |
42 | | -ReactDom.render( |
43 | | - <QueueAnim> |
44 | | - <div key="1">enter in queue</div> |
45 | | - <div key="2">enter in queue</div> |
46 | | - <div key="3">enter in queue</div> |
47 | | - </QueueAnim> |
48 | | -, mountNode); |
49 | | -``` |
50 | | - |
51 | | -## Install |
52 | | - |
53 | | -[](https://npmjs.org/package/rc-queue-anim) |
54 | | - |
55 | | -## Browser Support |
56 | | - |
57 | | -| |  |  |  | | |
58 | | -| --- | --- | --- | --- | --- | |
59 | | -| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | |
60 | | - |
61 | | -### 1.7.x add childRefs and currentRef; |
62 | | - |
63 | | -```jsx |
64 | | -<QueueAnim |
65 | | - component={Row} |
66 | | - ref={(c) => { |
67 | | - this.ref = c; |
68 | | - }} |
69 | | - onEnd={() => { |
70 | | - // this..currentRef = <Row /> |
71 | | - // this..childRefs.a = <Col key="a">1212</Col> |
72 | | - }} |
73 | | -> |
74 | | - <Col key="a">1212</Col> |
75 | | -</QueueAnim> |
76 | | -``` |
77 | | - |
78 | | -## API |
79 | | - |
80 | | -> You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key. |
81 | | -
|
82 | | -| props | type | default | description | |
83 | | -|------------|----------------|---------|----------------| |
84 | | -| type | string / array | `right` | Animation Styles <br/>`alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| |
85 | | -| animConfig | object / array | null | Custom config, See below for more details [animConfig](#animConfig) | |
86 | | -| delay | number / array | 0 | delay of animation | |
87 | | -| duration | number / array | 450 | duration of animation | |
88 | | -| interval | number / array | 100 | interval of duration | |
89 | | -| leaveReverse | boolean | false | reverse animation order at leave | |
90 | | -| ease | string / array | `easeOutQuart` | animation easing config like `'ease'`, `['easeIn', 'easeOut']`, `[[.42,0,.58,1]`, [.42,0,.58,1]]: [more](http://easings.net/en) | |
91 | | -| appear | boolean | true | whether support appear anim | |
92 | | -| component | string / React.Element | `div` | component tag | |
93 | | -| componentProps | Object | null | component is React.Element, component tag props | |
94 | | -| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | className to every element of animating | |
95 | | -| forcedReplay | boolean | false | `leave` animation moment trigger `enter`, forced replay. | |
96 | | -| onEnd | function | null | animation end callback({ key, type }), type: `enter` or `leave` | |
97 | | - |
98 | | -> Above props support array format, like `['left', 'top']`, the secord item is leave config. [Demo](http://react-component.github.io/queue-anim/examples/enter-leave.html) |
99 | | -
|
100 | | -### animConfig |
101 | | - |
102 | | -**Data fall into three categories：** |
103 | | - |
104 | | -- Custom set start: `{ opacity:[1, 0] }` ； |
105 | | -<br/> default； |
106 | | -<br/>type: `{ opacity: Array<end, start> }`； |
107 | | -<br/>leave automatic reverse: `{ opacity: Array<start, end> }`； |
108 | | - |
109 | | -- Custom: `{ opacity: 0 }`； |
110 | | -<br/> Start position is not set。 |
111 | | - |
112 | | -- Array: `[{ opacity:[1, 0] }, { opacity:[1, 0] }]`； |
113 | | -<br/> type: `[{ opacity: Array<end, start> }, { opacity: Array<start, end>}]` |
114 | | - |
115 | | -## Development |
116 | | - |
117 | | -``` |
118 | | -npm install |
119 | | -npm start |
120 | | -``` |
| 1 | +docs/index.md |
0 commit comments