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
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`	--
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