node package manager



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 8+ ✔ 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 Velocity config, like {opacity:[1, 0], translateY:[0, -30]}, velocity config
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 div component tag
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.


npm install
npm start