{"id":13802748,"url":"https://github.com/react-component/queue-anim","last_synced_at":"2025-04-08T09:07:57.192Z","repository":{"id":37381836,"uuid":"44430028","full_name":"react-component/queue-anim","owner":"react-component","description":"Animate React Component in queue","archived":false,"fork":false,"pushed_at":"2023-03-02T22:20:33.000Z","size":7626,"stargazers_count":474,"open_issues_count":13,"forks_count":38,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T14:08:31.073Z","etag":null,"topics":["animation","ant-motion","motion","react"],"latest_commit_sha":null,"homepage":"https://queue-anim.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-10-17T08:46:09.000Z","updated_at":"2025-03-15T07:23:53.000Z","dependencies_parsed_at":"2024-01-13T10:42:37.125Z","dependency_job_id":"5c6f8dbd-e658-4675-9058-403175268c25","html_url":"https://github.com/react-component/queue-anim","commit_stats":{"total_commits":252,"total_committers":14,"mean_commits":18.0,"dds":"0.46031746031746035","last_synced_commit":"ad7b7bb9ac34e6f49405a04a515f82fd81535b28"},"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fqueue-anim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fqueue-anim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fqueue-anim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fqueue-anim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/queue-anim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284940,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","ant-motion","motion","react"],"created_at":"2024-08-04T00:01:53.362Z","updated_at":"2025-04-08T09:07:57.153Z","avatar_url":"https://github.com/react-component.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rc-queue-anim\n---\n\nAnimate React Component in queue, thanks to [rc-animate](https://github.com/react-component/animate) and [enter-animation](https://github.com/jljsj33/enter-animation).\n\n[![NPM version][npm-image]][npm-url]\n[![build status][github-actions-image]][github-actions-url]\n[![Codecov][codecov-image]][codecov-url]\n[![Total alerts][lgtm-alerts-image]][lgtm-alerts-url]\n[![Language grade: JavaScript][lgtm-grade-image]][lgtm-grade-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-queue-anim.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-queue-anim\n[github-actions-image]: https://github.com/react-component/queue-anim/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/react-component/queue-anim/actions\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/queue-anim/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/react-component/queue-anim/branch/master\n[lgtm-alerts-image]: https://img.shields.io/lgtm/alerts/g/react-component/queue-anim.svg?logo=lgtm\u0026logoWidth=18\u0026style=flat-square\n[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/queue-anim/alerts/\n[lgtm-grade-image]: https://img.shields.io/lgtm/grade/javascript/g/react-component/queue-anim.svg?logo=lgtm\u0026logoWidth=18\u0026style=flat-square\n[lgtm-grade-url]: https://lgtm.com/projects/g/react-component/queue-anim/context:javascript\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-queue-anim.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-queue-anim\n\n## Example\n2.x: https://queue-anim.vercel.app/\n\n1.x: http://react-component.github.io/queue-anim/examples/\n\n![](https://t.alipayobjects.com/images/rmsweb/T12PliXjXgXXXXXXXX.gif)\n\n## Usage\n\n```js\nimport QueueAnim from 'rc-queue-anim';\nimport React from 'react';\nimport ReactDom from 'react-dom';\n\nReactDom.render(\n  \u003cQueueAnim\u003e\n    \u003cdiv key=\"1\"\u003eenter in queue\u003c/div\u003e\n    \u003cdiv key=\"2\"\u003eenter in queue\u003c/div\u003e\n    \u003cdiv key=\"3\"\u003eenter in queue\u003c/div\u003e\n  \u003c/QueueAnim\u003e\n, mountNode);\n```\n\n## Install\n\n[![rc-queue-anim](https://nodei.co/npm/rc-queue-anim.png)](https://npmjs.org/package/rc-queue-anim)\n\n## Browser Support\n\n|![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)|\n| --- | --- | --- | --- | --- |\n| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |\n\n### 1.7.x add childRefs and currentRef; \n\n```js\n\u003cQueueAnim \n  component={Row} \n  ref={(c) =\u003e {\n    this.ref = c;\n  }}\n  onEnd={() =\u003e {\n    // this..currentRef = \u003cRow /\u003e\n    // this..childRefs.a = \u003cCol key=\"a\"\u003e1212\u003c/Col\u003e\n  }}\n\u003e\n  \u003cCol key=\"a\"\u003e1212\u003c/Col\u003e\n\u003c/QueueAnim\u003e\n```\n\n## API\n\n\u003e You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key.\n\n| props      | type           | default | description    |\n|------------|----------------|---------|----------------|\n| type       | string / array | `right` | Animation Styles \u003cbr/\u003e`alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|\n| animConfig | object / array | null    | Custom config, See below for more details [animConfig](#animConfig) |\n| delay      | number / array | 0       | delay of animation |\n| duration   | number / array | 450     | duration of animation  |\n| interval   | number / array | 100      | interval of duration |\n| leaveReverse | boolean      | false   | reverse animation order at leave |\n| ease       | string / array | `easeOutQuart` | animation easing config like `'ease'`, `['easeIn', 'easeOut']`, `[[.42,0,.58,1]`, [.42,0,.58,1]]: [more](http://easings.net/en) |\n| appear     | boolean        |  true   | whether support appear anim |\n| component  | string / React.Element | `div` | component tag |\n| componentProps | Object | null | component is React.Element, component tag props |\n| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | className to every element of animating |\n| forcedReplay | boolean | false | `leave` animation moment trigger `enter`, forced replay. |\n| onEnd      | function      |   null    |  animation end callback({ key, type }), type: `enter` or `leave` |\n\n\u003e 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)\n\n### animConfig\n\n**Data fall into three categories：**\n\n- Custom set start: `{ opacity:[1, 0] }` ；\n\u003cbr/\u003e default；\n\u003cbr/\u003etype: `{ opacity: Array\u003cend, start\u003e }`；\n\u003cbr/\u003eleave automatic reverse: `{ opacity: Array\u003cstart, end\u003e }`；\n\n- Custom: `{ opacity: 0 }`；\n\u003cbr/\u003e Start position is not set。\n\n- Array: `[{ opacity:[1, 0] }, { opacity:[1, 0] }]`；\n\u003cbr/\u003e type: `[{ opacity: Array\u003cend, start\u003e }, { opacity: Array\u003cstart, end\u003e}]`\n\n## Development\n\n```\nnpm install\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fqueue-anim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Fqueue-anim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fqueue-anim/lists"}