Ray-animate NPM

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