JSPM

  • Created
  • Published
  • Downloads 606529
  • Score
    100M100P100Q189031F

css-transition ui component for react

Package Exports

  • rc-animate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-animate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

var Animate = require('rc-animate');
var React = require('react');
React.render(<Animate><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
transitionEnter Boolean true whether support transition enter anim
transitionLeave Boolean true whether support transition leave anim
onEnd function(key:String, enter:Boolean) true animation end callback
animation Object {} to animate with js. for examples: ```js { enter: function(node, done){ node.style.display='none'; $(node).slideUp(done); return { stop:function(){ $(node).stop(true); } }; }, leave: function(node, done){ node.style.display=''; $(node).slideDown(done); return { stop:function(){ $(node).stop(true); } }; } } ```

Development

npm install
npm start

Example

http://localhost:8000/examples/index.md

online example: http://react-component.github.io/animate/examples/

Test Case

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

Coverage

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

License

rc-animate is released under the MIT license.