前端使用的React动画插件,实现JQuery的链式动画,基
适用于React.js的前端动画小插件,支持链式语法,类似于JQuery的动画。
2. 安装
npm install easy-animation
2. 使用
class Test extends Component {
_handleButtonEvents = (type, e) => {
//先得到动画对象,然后依次执行
easy(this.div).slideUp().slideDown()
}
render() {
return (
<div>
<button onClick={this._handleButtonEvents.bind(this, 'test')}>
动画
</button>
<div id="div" ref={node => this.div = node} style={{ width: 300, height: 300, backgroundColor: 'red', margin: '0 auto' }}>
</div>
</div>
);
}
}
3. API
动画时间都是秒为单位,所有的动画都会返回动画对象,
获得动画对象
easy(通过ref获得的react节点)
slideUp
slideUp(动画时间)
slideDown
slideUp(动画时间)
animate,同时执行多个动画
animate(动画内容,动画时间)
easy(通过ref获得的react节点).animate({
width:'120px',
height:'120px'
},1)
bounce,弹性缩放
bounce(最大尺寸,动画时间)
delay,延迟
delay(动画时间)
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
