Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    rc-queue-animpublic

    rc-queue-anim


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

    NPM version build status Test coverage node version npm download

    Example

    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+ ✔

    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

    3,578

    version

    1.6.2

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar