# bee-animate

> animate ui component for react

Latest version **1.0.0** (published 2017-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install bee-animate
pnpm add bee-animate
yarn add bee-animate
bun add bee-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.0.0 |
| Published | 2017-09-30 |
| First published | 2016-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ahua52 |
| Keywords | react, react-component, react-animate, iuap-design, neoui-react, animate |

## Links

- npm: https://www.npmjs.com/package/bee-animate
- Repository: https://github.com/tinper-bee/animate
- Issues: https://github.com/tinper-bee/animate/issues
- npm.io page: https://npm.io/package/bee-animate

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [tinper-bee-core](https://npm.io/package/tinper-bee-core.md) latest

## 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.0.0 (latest) — 2017-09-30
- 0.0.3 — 2016-12-19
- 0.0.2 — 2016-12-13

## README

# bee-animate
[![npm version](https://img.shields.io/npm/v/bee-animate.svg)](https://www.npmjs.com/package/bee-animate)
[![Build Status](https://img.shields.io/travis/tinper-bee/generator-tinper-bee/master.svg)](https://travis-ci.org/tinper-bee/bee-animate)
[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-animate.svg)](https://david-dm.org/tinper-bee/bee-animate#info=devDependencies)


react bee-animate component for tinper-bee

- transitionName
作为定义的动画名称，也是我们定义css动画样式的一部分。

```
//css
.move-enter, .move-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.move-leave {
  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.move-enter.move-enter-active, .move-appear.move-enter-active {
  animation-name: moveLeftIn;
  animation-play-state: running;
}

.move-leave.move-leave-active {
  animation-name: moveRightOut;
  animation-play-state: running;
}

@keyframes moveLeftIn {
  0% {
    transform-origin: 0 0;
    transform: translateX(30px);
    opacity: 0;
    background: #f5f5f5;
  }
  20% {
    transform-origin: 0 0;
    transform: translateX(0);
    opacity: 1;
  }
  80%{
    background: #eee;
  }
  100%{
    background: transparent;
    opacity: 1;
  }
}

@keyframes moveRightOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(-30px);
    opacity: 0;
  }
}

//js

return (
    <Animate transitionName="move" />
)

```

- animation

Animate组件默认使用css3动画，当css3动画不兼容时，调用用户传入的animation对象来操作元素或是产生动画。
```
let animation = {
    /**
     * @param node 当前dom元素
     * @param callback 相应的回掉函数
     */
    enter: function(node, callback){
            //一些操作
            return {
                    stop:function(){

                      $(node).stop(true);
                    }
                  };
    },
    appear: function(node, callback){
            //一些操作
            return {
                    stop:function(){

                      $(node).stop(true);
                    }
                  };
    },
    leave: function(node, callback){
            //一些操作
            return {
                    stop:function(){

                      $(node).stop(true);
                    }
                  };
    }
}

return (
    <Animate animation={animation} />
)

```



## API

动画组件存在三个状态`enter`、`appear`、`leave`

|参数|说明|类型|默认值|
|:--|:---:|:--:|---:|
|component|动画最外层元素|react组件或字符串|span|
|animation|当不支持css3动画时，调用animation| 对象|{}|
|transitionName|动画名称| 对象或字符串||
|transitionEnter|是否支持进入状态| 布尔值|true|
|transitionLeave|是否支持离开状态| 布尔值|true|
|transitionAppear|是否支持停留状态| 布尔值|false|
|exclusive|多个子元素是否独立动画| 布尔值||
|onEnd|结束时的回调函数| 函数||
|onEnter|开始时的回调函数| 函数||
|onLeave|离开时的回调函数| 函数||
|onAppear|停留时的回调函数| 函数||
|showProp|通过制定props设置子元素是否显示| 字符串||



#### 开发调试

```sh
$ git clone https://github.com/tinper-bee/bee-animate
$ cd bee-animate
$ npm install
$ npm run dev
```

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