https://github.com/react-component/animate

anim react element easily
https://github.com/react-component/animate

Last synced: about 2 months ago
JSON representation

anim react element easily

• Host: GitHub
• URL: https://github.com/react-component/animate
• Owner: react-component
• License: mit
• Created: 2015-07-17T02:47:00.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-07-30T21:17:15.000Z (over 3 years ago)
• Last Synced: 2024-10-17T13:22:00.460Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://react-component.github.io/animate/
• Size: 5.1 MB
• Stars: 679
• Watchers: 31
• Forks: 108
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-components-all - rc-animate - Anim react element easily. (Uncategorized / Uncategorized)
• awesome-list - rc-animate - Anim react element easily. (Ferramentas / Form Components)
• awesome-react-components - rc-animate - Anim react element easily. (UI Animation / Form Components)

README

        
# 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

[![rc-animate](https://nodei.co/npm/rc-animate.png)](https://npmjs.org/package/rc-animate)

## Usage

```js

import Animate from 'rc-animate';

export default () => (

  

    
1

    
2

  

);

```


## Compatibility

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
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:

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