rc-queue-anim

rc-queue-anim

Animate React Component in queue, thanks to rc-animate and enter-animation.
!NPM versionnpm-imagenpm-url !build statusgithub-actions-imagegithub-actions-url !Codecovcodecov-imagecodecov-url !Total alertslgtm-alerts-imagelgtm-alerts-url !Language grade: JavaScriptlgtm-grade-imagelgtm-grade-url !node versionnode-imagenode-url !npm downloaddownload-imagedownload-url

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