# rc-animate.css

> react and postcss warp animate.css

Latest version **0.1.7** (published 2016-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-animate.css
pnpm add rc-animate.css
yarn add rc-animate.css
bun add rc-animate.css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2016-07-07 |
| First published | 2016-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 22 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | xuanxiao |
| Maintainers | xuanxiao |
| Keywords | react, postcss, animate.css, babel, es6 |

## Links

- npm: https://www.npmjs.com/package/rc-animate.css
- Repository: https://github.com/xuanxiao2013/rc-animate.css
- Homepage: https://github.com/xuanxiao2013/rc-animate.css#readme
- Issues: https://github.com/xuanxiao2013/rc-animate.css/issues
- npm.io page: https://npm.io/package/rc-animate.css

## Dependencies (22)

- [babel](https://npm.io/package/babel.md) 6.5.2
- [react](https://npm.io/package/react.md) 0.14.7
- [eslint](https://npm.io/package/eslint.md) 1.4.3
- [postcss](https://npm.io/package/postcss.md) ^5.0.19
- [webpack](https://npm.io/package/webpack.md) 1.12.2
- [react-dom](https://npm.io/package/react-dom.md) 0.14.7
- [babel-core](https://npm.io/package/babel-core.md) 6.6.5
- [css-loader](https://npm.io/package/css-loader.md) ^0.23.1
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.6
- [animate.css](https://npm.io/package/animate.css.md) 3.5.1
- [babel-eslint](https://npm.io/package/babel-eslint.md) 5.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) 6.2.4
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^0.1.7
- [style-loader](https://npm.io/package/style-loader.md) ^0.13.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 1.0.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.0.16
- [postcss-import](https://npm.io/package/postcss-import.md) ^8.1.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^0.8.2
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) 6.5.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) 6.6.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 3.4.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.9.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2016-07-07
- 0.1.6 — 2016-07-07
- 0.1.1 — 2016-07-06

## README

# react-animate.css
---

使用react 和 [postcss](https://github.com/postcss/postcss) 包装 [Animate.css](https://github.com/daneden/animate.css)，避免css命名冲突，方便react使用

## install
 
 ```bash
 npm install rc-animate.css
 ```

## Usage

1. ainmate name list:
  * `bounce`
  * `flash`
  * `pulse`
  * `rubberBand`
  * `shake`
  * `headShake`
  * `swing`
  * `tada`
  * `wobble`
  * `jello`
  * `bounceIn`
  * `bounceInDown`
  * `bounceInLeft`
  * `bounceInRight`
  * `bounceInUp`
  * `bounceOut`
  * `bounceOutDown`
  * `bounceOutLeft`
  * `bounceOutRight`
  * `bounceOutUp`
  * `fadeIn`
  * `fadeInDown`
  * `fadeInDownBig`
  * `fadeInLeft`
  * `fadeInLeftBig`
  * `fadeInRight`
  * `fadeInRightBig`
  * `fadeInUp`
  * `fadeInUpBig`
  * `fadeOut`
  * `fadeOutDown`
  * `fadeOutDownBig`
  * `fadeOutLeft`
  * `fadeOutLeftBig`
  * `fadeOutRight`
  * `fadeOutRightBig`
  * `fadeOutUp`
  * `fadeOutUpBig`
  * `flipInX`
  * `flipInY`
  * `flipOutX`
  * `flipOutY`
  * `lightSpeedIn`
  * `lightSpeedOut`
  * `rotateIn`
  * `rotateInDownLeft`
  * `rotateInDownRight`
  * `rotateInUpLeft`
  * `rotateInUpRight`
  * `rotateOut`
  * `rotateOutDownLeft`
  * `rotateOutDownRight`
  * `rotateOutUpLeft`
  * `rotateOutUpRight`
  * `hinge`
  * `rollIn`
  * `rollOut`
  * `zoomIn`
  * `zoomInDown`
  * `zoomInLeft`
  * `zoomInRight`
  * `zoomInUp`
  * `zoomOut`
  * `zoomOutDown`
  * `zoomOutLeft`
  * `zoomOutRight`
  * `zoomOutUp`
  * `slideInDown`
  * `slideInLeft`
  * `slideInRight`
  * `slideInUp`
  * `slideOutDown`
  * `slideOutLeft`
  * `slideOutRight`
  * `slideOutUp`
  
2. example

```js
import Animate from 'react-animate.css';

class DemoComponent extends React.Component {
  constructor(props, context) {
    super(props, context)
  }
  
  render() {
    return (
      <Animate animateName="zoomIn" style={{display: 'block'}}>
          // you template
      </Animate>
    )
  }
}

```

## API

### Animate props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|animateName | 动画名称,必须是指定的名称或者空字符串 | String | '' |
|style | 节点样式，display 为block 或者 inline-block 时动画生效 | Object |  |
|children | 动画要包裹的节点 | React.Element |  |

---
_Source: https://npm.io/package/rc-animate.css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._