rc-animate

---

Animate React Component easily.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Dependencies][david-image]][david-url]
[![DevDependencies][david-dev-image]][david-dev-url]
[![npm download][download-image]][download-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]

[npm-image]: http://img.shields.io/npm/v/rc-animate.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-animate
[travis-image]: https://img.shields.io/travis/react-component/animate.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/animate
[coveralls-image]: https://img.shields.io/coveralls/react-component/animate.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/animate?branch=master
[david-url]: https://david-dm.org/react-component/animate
[david-image]: https://david-dm.org/react-component/animate/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/animate?type=dev
[david-dev-image]: https://david-dm.org/react-component/animate/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-animate.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-animate
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-animate
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-animate

Install


Usage

``js
import Animate from 'rc-animate';

export default () => (



1

2

);
`

Compatibility

|
IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

API

$3

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

$3

with appear, enter and leave as keys. for example:

`js
{
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.