简介：

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 [email protected]: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>
      
    }
}