https://github.com/react-component/queue-anim

Animate React Component in queue
https://github.com/react-component/queue-anim

animation ant-motion motion react

Last synced: 3 days ago
JSON representation

Animate React Component in queue

• Host: GitHub
• URL: https://github.com/react-component/queue-anim
• Owner: react-component
• License: mit
• Created: 2015-10-17T08:46:09.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T22:20:33.000Z (almost 2 years ago)
• Last Synced: 2024-12-19T20:05:09.217Z (11 days ago)
• Topics: animation, ant-motion, motion, react
• Language: TypeScript
• Homepage: https://queue-anim.vercel.app/
• Size: 7.27 MB
• Stars: 476
• Watchers: 12
• Forks: 37
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# rc-queue-anim

---

Animate React Component in queue, thanks to [rc-animate](https://github.com/react-component/animate) and [enter-animation](https://github.com/jljsj33/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/

![](https://t.alipayobjects.com/images/rmsweb/T12PliXjXgXXXXXXXX.gif)

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

    
enter in queue

  

, mountNode);

```


## Install

[![rc-queue-anim](https://nodei.co/npm/rc-queue-anim.png)](https://npmjs.org/package/rc-queue-anim)

## Browser Support

|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|

| --- | --- | --- | --- | --- |

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

### 1.7.x add childRefs and currentRef; 

```js

 {

    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](#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](http://easings.net/en) |

| 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](http://react-component.github.io/queue-anim/examples/enter-leave.html)

### animConfig

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

```