rc-queue-anim

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

View demo Download Source

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 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

API

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

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

GitHub