node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »



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

NPM version build status Test coverage gemnasium deps node version npm download



import QueueAnim from 'rc-queue-anim';
import React from 'react';
import ReactDom from 'react-dom';
    <div key="1">enter in queue</div>
    <div key="2">enter in queue</div>
    <div key="3">enter in queue</div>
, mountNode);



Browser Support

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


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
onEnd function null animate end callback({ key, type }), type: enter or leave

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

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


Data fall into three categories:

  • Custom set start: { opacity:[1, 0] }
    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