rc-queue-anim

---

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

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

Browser Support

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