代码拉取完成，页面将自动刷新
Animate React Component in queue, thanks to rc-animate and enter-animation.
http://react-component.github.io/queue-anim/examples/
import QueueAnim from 'rc-queue-anim';
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<QueueAnim>
<div key="1">enter in queue</div>
<div key="2">enter in queue</div>
<div key="3">enter in queue</div>
</QueueAnim>
, mountNode);
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
<QueueAnim
component={Row}
ref={(c) => {
this.ref = c;
}}
onEnd={() => {
// this..currentRef = <Row />
// this..childRefs.a = <Col key="a">1212</Col>
}}
>
<Col key="a">1212</Col>
</QueueAnim>
You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key.
| props | type | default | description |
|---|---|---|---|
| type | string / array | right |
Animation Styles alpha left right top bottom scale scaleBig scaleX scaleY
|
| animConfig | object / array | null | Custom config, See below for more details animConfig |
| delay | number / array | 0 | delay of animation |
| duration | number / array | 450 | duration of animation |
| interval | number / array | 100 | interval of duration |
| leaveReverse | boolean | false | reverse animation order at leave |
| ease | string / array | easeOutQuart |
animation easing config like 'ease', ['easeIn', 'easeOut'], [[.42,0,.58,1], [.42,0,.58,1]]: more
|
| appear | boolean | true | whether support appear anim |
| component | string / React.Element | div |
component tag |
| componentProps | Object | null | component is React.Element, component tag props |
| animatingClassName | array | ['queue-anim-entering', 'queue-anim-leaving'] |
className to every element of animating |
| forcedReplay | boolean | false |
leave animation moment trigger enter, forced replay. |
| onEnd | function | null | animation end callback({ key, type }), type: enter or leave
|
Above props support array format, like
['left', 'top'], the secord item is leave config. Demo
Data fall into three categories：
Custom set start: { opacity:[1, 0] } ；
default；
type: { opacity: Array<end, start> }；
leave automatic reverse: { opacity: Array<start, end> }；
Custom: { opacity: 0 }；
Start position is not set。
Array: [{ opacity:[1, 0] }, { opacity:[1, 0] }]；
type: [{ opacity: Array<end, start> }, { opacity: Array<start, end>}]
npm install
npm start
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。