rc-animate

    3.1.1 • Public • Published

    rc-animate


    Animate React Component easily.

    NPM version build status Test coverage Dependencies DevDependencies npm download bundle size

    Install

    rc-animate

    Usage

    import Animate from 'rc-animate';
     
    export default () => (
      <Animate animation={{ ... }}>
        <p key="1">1</p>
        <p key="2">2</p>
      </Animate>
    );

    Compatibility

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    Electron
    Electron
    IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

    API

    props

    name type default description
    component React.Element/String 'span' wrap dom node or component for children. set to '' if you do not wrap for only one child
    componentProps Object {} extra props that will be passed to component
    showProp String using prop for show and hide. [demo](http://react-component.github.io/animate/examples/hide-todo.html)
    exclusive Boolean whether allow only one set of animations(enter and leave) at the same time.
    transitionName String|Object specify corresponding css, see ReactCSSTransitionGroup
    transitionAppear Boolean false whether support transition appear anim
    transitionEnter Boolean true whether support transition enter anim
    transitionLeave Boolean true whether support transition leave anim
    onEnd function(key:String, exists:Boolean) true animation end callback
    animation Object {} to animate with js. see animation format below.

    animation format

    with appear, enter and leave as keys. for example:

      {
        appear: function(node, done){
          node.style.display='none';
          $(node).slideUp(done);
          return {
            stop:function(){
              // jq will call done on finish
              $(node).stop(true);
            }
          };
        },
        enter: function(){
          this.appear.apply(this,arguments);
        },
        leave: function(node, done){
          node.style.display='';
          $(node).slideDown(done);
          return {
            stop:function(){
              // jq will call done on finish
              $(node).stop(true);
            }
          };              
        }
      }

    Development

    npm install
    npm start
    

    Example

    http://localhost:8200/examples/index.md

    online example: http://react-component.github.io/animate/examples/

    Test Case

    npm test
    npm run chrome-test
    

    Coverage

    npm run coverage
    

    open coverage/ dir

    License

    rc-animate is released under the MIT license.

    Install

    npm i rc-animate

    DownloadsWeekly Downloads

    784,559

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    102 kB

    Total Files

    20

    Last publish

    Collaborators

    • yesmeck
    • afc163
    • xujihui1985
    • yiminghe
    • zombiej