1.0.3 • Published 7 years ago

bs-animation v1.0.3

Weekly downloads
2
License
ISC
Repository
gitlab
Last release
7 years ago

使用方式:

1.安装:

npm i @beisen/animation -S

2.引入:

import Bounce from '@beisen/animation/lib/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

特别属性

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加速。

使用方法:

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