rc-queue-anim


Animate React Component in queue, thanks to rc-animate and enter-animation.

NPM versionbuild statusCodecovTotal alertsLanguage grade: JavaScriptnode versionnpm download

Example

2.x: https://queue-anim.vercel.app/

1.x: http://react-component.github.io/queue-anim/examples/

Usage

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);

Install

rc-queue-anim

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔Chrome 31.0+ ✔Firefox 31.0+ ✔Opera 30.0+ ✔Safari 7.0+ ✔

1.7.x add childRefs and currentRef;

<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>

API

You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key.

propstypedefaultdescription
typestring / arrayrightAnimation Styles
alpha left right top bottom scale scaleBig scaleX scaleY
animConfigobject / arraynullCustom config, See below for more details animConfig
delaynumber / array0delay of animation
durationnumber / array450duration of animation
intervalnumber / array100interval of duration
leaveReversebooleanfalsereverse animation order at leave
easestring / arrayeaseOutQuartanimation easing config like 'ease', ['easeIn', 'easeOut'], [[.42,0,.58,1], [.42,0,.58,1]]: more
appearbooleantruewhether support appear anim
componentstring / React.Elementdivcomponent tag
componentPropsObjectnullcomponent is React.Element, component tag props
animatingClassNamearray['queue-anim-entering', 'queue-anim-leaving']className to every element of animating
forcedReplaybooleanfalseleave animation moment trigger enter, forced replay.
onEndfunctionnullanimation end callback({ key, type }), type: enter or leave

Above props support array format, like ['left', 'top'], the secord item is leave config. Demo

animConfig

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>}]

Development

npm install
npm start