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.

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, like `{opacity:[1, 0], translateY:[0, -30]}`, velocity config
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	`div`	component tag
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.

Development

npm install
npm start