rc-queue-anim

Queue animation component for react

Usage no npm install needed!

<script type="module">
  import rcQueueAnim from 'https://cdn.skypack.dev/rc-queue-anim';
</script>

README

rc-queue-anim


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

NPM version build status Codecov Total alerts Language grade: JavaScript node version npm download

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

rc-queue-anim

Browser Support

IE Chrome Firefox Opera Safari
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