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

Current Tags

1.6.6-beta.0 ... beta (7 years ago)
1.8.5 ... latest (5 years ago)

rc-queue-anim

Example

Usage

Install

Browser Support

1.7.x add childRefs and currentRef;

API

animConfig

Development

Current Tags

9 Versions