# rc-queue-anim > Queue animation component for react Latest version **2.0.0** (published 2021-07-22) · 0 weekly downloads ## Install ```sh npm install rc-queue-anim pnpm add rc-queue-anim yarn add rc-queue-anim bun add rc-queue-anim ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2021-07-22 | | First published | 2015-10-17 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 56.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 472 | | Author | 155259966@qq.com | | Maintainers | afc163, jljsj33 | | Keywords | react, react-component, queue, react-queue-anim, queue-anim, queue-animte, queue-animation, animation, animate, rc-animation, rc-animate, motion, rc-motion, ant-motion | ## Links - npm: https://www.npmjs.com/package/rc-queue-anim - Repository: https://github.com/react-component/queue-anim - Issues: https://github.com/react-component/queue-anim/issues - npm.io page: https://npm.io/package/rc-queue-anim ## Dependencies (2) - [tween-one](https://npm.io/package/tween-one.md) ^1.0.52 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.1 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 2.0.0 (latest) — 2021-07-22 - 1.6.6-beta.0 (beta) — 2018-09-25 - 1.8.5 — 2020-05-13 - 1.8.4 — 2020-03-06 - 1.8.3 — 2019-11-21 - 1.8.2 — 2019-08-27 - 1.8.1 — 2019-08-23 - 1.8.0 — 2019-08-22 - 1.7.0 — 2019-08-01 - 1.6.12 — 2019-02-27 - 1.6.11 — 2019-01-29 - 1.6.10 — 2018-12-11 - 1.6.9 — 2018-12-11 - 1.6.8 — 2018-11-27 - 1.6.7 — 2018-10-26 - … 58 more at https://npm.io/package/rc-queue-anim/versions ## 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 ``` --- _Source: https://npm.io/package/rc-queue-anim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._