Popularity
6.1
-
Activity
6.1
Growing
550
36
97

Monthly Downloads: 0
Programming language: JavaScript
Latest version: v2.10.2

rc-animate alternatives and similar libraries

Based on the "UI Animation" category

Do you think we are missing an alternative of rc-animate or a related project?

Add another 'UI Animation' Library

README

rc-animate


animate react element easily

NPM version build status Test coverage gemnasium deps node version npm download

Feature

  • support ie8,ie8+,chrome,firefox,safari

install

rc-animate

Usage

import Animate from 'rc-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. demo 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.


*Note that all licence references and agreements mentioned in the rc-animate README section above are relevant to that project's source code only.