@chemzqm/rc-animate

2.0.11 • Public • Published

rc-animate


animate react element easily

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

Sauce Test Status

Sauce Test Status

Feature

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

install

rc-animate

Usage

var Animate = require('rc-animate');
var ReactDOM = require('react-dom');
ReactDOM.render(<Animate animation={{}}><p key="1">1</p><p key="2">2</p></Animate>, container);

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
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 transitionName, need to specify corresponding css
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

http://localhost:8200/tests/runner.html?coverage

Coverage

http://localhost:8200/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8200/tests/runner.html?coverage

License

rc-animate is released under the MIT license.

Package Sidebar

Install

npm i @chemzqm/rc-animate

Weekly Downloads

4

Version

2.0.11

License

none

Last publish

Collaborators

  • chemzqm