Package Exports

rc-queue-anim

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-queue-anim) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-queue-anim

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

Browser Support


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

Development

npm install
npm start

Example

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

install

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);

API

props	type	default	description
type	string / array	`right`	Animation Styles `left` `right` `top` `bottom` `scale` `scaleFrom` `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	500	duration of animation
interval	number / array	30	interval of duration
leaveReverse	boolean	false	reverse animation order at leave
ease	string / array	`easeOutQuart`	animation easing string, more
component	string	`div`	component tag

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.