# @beisen/animation

> >1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。

Latest version **1.0.6** (published 2017-08-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen/animation
pnpm add @beisen/animation
yarn add @beisen/animation
bun add @beisen/animation
```

## 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.6 |
| Published | 2017-08-23 |
| First published | 2017-07-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xuhaibin |
| Maintainers | beisen |
| Keywords | beisen, react-component, es6, animation |

## Links

- npm: https://www.npmjs.com/package/@beisen/animation
- Repository: git@gitlab.beisencorp.com:ux-xhbisme/ux-animation
- npm.io page: https://npm.io/package/@beisen/animation

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.6.1
- [aphrodite](https://npm.io/package/aphrodite.md) ^1.2.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [react-animations](https://npm.io/package/react-animations.md) ^0.1.0
- [velocity-animate](https://npm.io/package/velocity-animate.md) ^1.5.0
- [@beisen/talent-ui-dll-foundation](https://npm.io/package/@beisen/talent-ui-dll-foundation.md) ^1.0.13

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2017-08-23
- 1.0.5 — 2017-08-23
- 1.0.4 — 2017-08-21
- 1.0.2 — 2017-07-13
- 1.0.0 — 2017-07-12

## README

# 简介：

>1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。

>2.坚持拿来就用的原则，使用方便简单。

>3.支持自定义动画效果，内部采用GPU和浏览器加速，让css动画效果更流畅。

>4.js操作css的好处：既能利用css动画的兼容性，声明式地写动画，汲取了css动画的全部优点，又通过js控制动画流程弥补了css动画的最大不足。

>5.具体例子可以参照example文件夹。

# 使用方式：

## 1.安装：

    npm i @beisen/animation -S
    
## 2.引入：

    import Bounce from '@beisen/animation/src/bounce';
    
or
    
    import {Bounce} from '@beisen/animation';
    
## 3.使用

    <Bounce duration='1s' component={()=><div className='demo-item-component' onClick={()=>{this.handleClick(param)}} >bounce</div>} />
   

# 效果和支持的动画名称可以把项目clone下来

## 1.git clone git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git

## 2.npm i && npm run dev

## 3.open http://localhost:8080

>demo1

# 特别属性

Merge和animations是需要配合使用的。

**使用时特别注意：两种相反的属性是不可以merge的，例如fadeIn和fadeOut之类。该组件受react-animations包限制，只能合并两种不同的动画**


使用方式：

    <Merge duration='1s' mergeAnimations={ [animations.tada,animations.flip] } component={()=><div className='demo-item-component' onClick={()=>{this.handleClick(param)}} >tada&&flip</div>} />

# 启动GPU加速

SpeedUpGPU 和 .speed-up-GPU类名配合使用可启动GPU加速,除了GPU加速之外，在chrome，firefox，opera浏览器下还采用will-change:animation,启用浏览器优化方案。

使用方法：

    import SpeedUpGPU from '@beisen/animation/src/speedUpGPU';
    <SpeedUpGPU component={()=><div className='div-demo1 speed-up-GPU'>csstest</div>}></SpeedUpGPU>

或

    import '@beisen/animation/src/speedUpGPU.scss'
    然后给想要GPU的标签元素加上类名 speed-up-GPU 就可以了
    
# 自定义动画
>demo1 的 CreateAnimation 是自定义动画，内部启用GPU加速和浏览器加速。样例代码：

    import CreateAnimation from '@beisen/animation/src/plateform/createAnimation/createAnimation';
    import React, {Component} from 'react';
    
    export default class Demo1 extends Component{
        getComponent = (param) => {
            return <div className={'demo-item-component '} onClick={()=>{this.handleClick(param)}} >{param}</div>
        }

        handleClick = (param) => {
            this.state[param] = true;
            this.setState(this.state);
            setTimeout(()=>{ 
                this.state[param] = false;
                this.setState(this.state);
            },1000)
        }
        
        render(){
            const demoAnimation = {
                from : {
                    width:'200px'
                },
                to : {
                    width:'400px'
                }
             }
            return <div className='demo-item'>{ createAnimation ? <CreateAnimation duration='1s' createAnimation={demoAnimation} component={()=>this.getComponent('createAnimation')} /> : this.getComponent('createAnimation') }</div>
          
        }
    }

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