使用方式:
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下来
git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git
1.git clone2.npm i && npm run dev
http://localhost:8080
3.open特别属性
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>