适用于React.js的前端动画小插件,支持链式语法,类似于JQuery的动画。
npm install easy-animation
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>
);
}
}
动画时间都是秒为单位,所有的动画都会返回动画对象,
获得动画对象
easy(通过ref获得的react节点)
slideUp
slideUp(动画时间)
slideDown
slideUp(动画时间)
animate,同时执行多个动画
animate(动画内容,动画时间)
easy(通过ref获得的react节点).animate({
width:'120px',
height:'120px'
},1)
bounce,弹性缩放
bounce(最大尺寸,动画时间)
delay,延迟
delay(动画时间)