Neutrino Packing Machine

    rc-queue-anim
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    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
    

    Install

    npm i rc-queue-anim

    DownloadsWeekly Downloads

    16,818

    Version

    2.0.0

    License

    none

    Unpacked Size

    57.5 kB

    Total Files

    25

    Last publish

    Collaborators

    • afc163
    • jljsj33