ray-animate

animate

install

npm install --save ray-animate

Usage

import Animate from 'ray-animate';

ReactDOM.render(
  <Animate animation={{ ... }}>
    <p key="1">1</p>
    <p key="2">2</p>
  </Animate>
, mountNode);

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 | | 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);
      }
    };
  }
}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

License

MIT

author

ilex.h