Animate React Component in queue, thanks to rc-animate and enter-animation.
2.x: https://queue-anim.vercel.app/
1.x: 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+ ✔ |
<QueueAnimcomponent={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:
{ opacity:[1, 0] }
;
default;
type: { opacity: Array<end, start> }
;
leave automatic reverse: { opacity: Array<start, end> }
;
{ opacity: 0 }
;
Start position is not set。
[{ opacity:[1, 0] }, { opacity:[1, 0] }]
;
type: [{ opacity: Array<end, start> }, { opacity: Array<start, end>}]
npm installnpm start