rc-queue-anim

---

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

Example

http://react-component.github.io/queue-anim/examples/

Use in Ant Design: http://ant.design/components/queue-anim

Usage

import QueueAnim from 'rc-queue-anim';
import React from 'react';
import ReactDom from 'reactd-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>, container);

Install

Browser Support

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

API

props	type	default	description
type	func / string / array	right	Animation Styles left right top bottom scale scaleBig scaleX scaleY
animConfig	func / object / array	null	Custom Velocity config, like {opacity:[1, 0], translateY:[0, -30]}, velocity config
delay	func / number / array	0	delay of animation
duration	func / number / array	500	duration of animation
interval	number / array	100	interval of duration
leaveReverse	boolean	false	reverse animation order at leave
ease	func / string / array	easeOutQuart	animation easing string, more
component	string	div	component tag
animatingClassName	array	['queue-anim-entering', 'queue-anim-leaving']	className to every element of animating

Above props support function format, like type={function (object){return 'right';}}, the key and index and target is the object . Demo

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.

Development

npm install
npm start