anim react element easily
Clone or download
Latest commit 1fe9e1e Nov 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/zh-cn add docs Jul 23, 2015
examples add leavedClassName Sep 18, 2018
src bump 2.6.0 Nov 26, 2018
tests add CSSMotion Sep 17, 2018
.editorconfig init Jul 17, 2015
.gitignore add es Jun 12, 2017
.travis.yml Run tests against node 6 Apr 13, 2017
HISTORY.md bump 2.6.0 Nov 26, 2018
LICENSE.md Added LICENSE.md Dec 21, 2016
README.md feat: add componentProps Feb 21, 2017
index.js add CSSMotion Sep 17, 2018
package.json bump 2.6.0 Nov 26, 2018

README.md

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](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|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.