node package manager

rc-queue-anim

rc-queue-anim


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

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

Example

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

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

API

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

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