Animate React Component easily.
import Animate from 'rc-animate';
export default () => (
<Animate animation={{ ... }}>
<p key="1">1</p>
<p key="2">2</p>
</Animate>
);IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| 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. |
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);
}
};
}
}npm install
npm start
http://localhost:8200/examples/index.md
online example: http://react-component.github.io/animate/examples/
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-animate is released under the MIT license.