rc-animate
animate react element easily
Feature
- support ie8,ie8+,chrome,firefox,safari
install
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|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(){
$(node).stop(true);
}
};
},
enter: function(){
this.appear.apply(this,arguments);
},
leave: function(node, done){
node.style.display='';
$(node).slideDown(done);
return {
stop:function(){
$(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.