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