rc-queue-anim

---

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

[![NPM version][npm-image]][npm-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![Total alerts][lgtm-alerts-image]][lgtm-alerts-url]
[![Language grade: JavaScript][lgtm-grade-image]][lgtm-grade-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-queue-anim.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-queue-anim
[github-actions-image]: https://github.com/react-component/queue-anim/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/queue-anim/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/queue-anim/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/queue-anim/branch/master
[lgtm-alerts-image]: https://img.shields.io/lgtm/alerts/g/react-component/queue-anim.svg?logo=lgtm&logoWidth=18&style=flat-square
[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/queue-anim/alerts/
[lgtm-grade-image]: https://img.shields.io/lgtm/grade/javascript/g/react-component/queue-anim.svg?logo=lgtm&logoWidth=18&style=flat-square
[lgtm-grade-url]: https://lgtm.com/projects/g/react-component/queue-anim/context:javascript
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-queue-anim.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-queue-anim

Example

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

1.x: http://react-component.github.io/queue-anim/examples/


Usage

``js
import QueueAnim from 'rc-queue-anim';
import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(



enter in queue

enter in queue

, mountNode);
`

Install


Browser Support

|!IE | !Chrome | !Firefox | !Opera | !Safari|
| --- | --- | --- | --- | --- |
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

$3

`js
component={Row}
ref={(c) => {
this.ref = c;
}}
onEnd={() => {
// this..currentRef =
// this..childRefs.a = 1212
}}
>
1212

`

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

$3

Data fall into three categories：

- Custom set start: { opacity:[1, 0] } ；

default；

type: { opacity: Array }；

leave automatic reverse: { opacity: Array }；

- Custom: { opacity: 0 }；

Start position is not set。

- Array: [{ opacity:[1, 0] }, { opacity:[1, 0] }]；

type: [{ opacity: Array }, { opacity: Array}]

Development

`
npm install
npm start
``