# ray-animate

> css-transition

Latest version **1.1.0** (published 2024-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-animate
pnpm add ray-animate
yarn add ray-animate
bun add ray-animate
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-03-05 |
| First published | 2017-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 218.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | react, animate |

## Links

- npm: https://www.npmjs.com/package/ray-animate
- npm.io page: https://npm.io/package/ray-animate

## Dependencies (2)

- [dt2react](https://npm.io/package/dt2react.md) ^2.x
- [ray-tween](https://npm.io/package/ray-tween.md) ^1.0.2

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

- 1.1.0 (latest) — 2024-03-05
- 1.0.3 — 2023-03-09
- 1.0.2 — 2021-06-21
- 1.0.1 — 2021-05-18
- 1.0.0 — 2017-12-14

## README

# ray-animate

animate

## install

```bash
npm install --save ray-animate
```

## Usage

```jsx
import Animate from 'ray-animate';

ReactDOM.render(
  <Animate animation={{ ... }}>
    <p key="1">1</p>
    <p key="2">2</p>
  </Animate>
, mountNode);
```

## 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 |
| 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);
      }
    };
  }
}
```

## Test Case

```
npm test
npm run chrome-test
```

## Coverage

```
npm run coverage
```

## License

MIT

## author

ilex.h

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