rc-animate
Animate React Component easily.
Install
Usage
import Animate from 'rc-animate';
export default () => (
<Animate animation={{ ... }}>
<p key="1">1</p>
<p key="2">2</p>
</Animate>
);
Compatibility
IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
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.