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

2.x: https://queue-anim.vercel.app/

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

1.7.x add childRefs and currentRef;

<QueueAnim 
  component={Row} 
  ref={(c) => {
    this.ref = c;
  }}
  onEnd={() => {
    // this..currentRef = <Row />
    // this..childRefs.a = <Col key="a">1212</Col>
  }}
>
  <Col key="a">1212</Col>
</QueueAnim>

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