用React加CSS3实现微信拆红包动画效果

<div className='topcontent-open'>
<div className='redpack-avatar'>
<span id='close'></span>
</div>
<h1 style={{marginTop: 180, color: 'white'}}> 谢谢参与 </h1>
<span className='redpack-text'>多多参与的奖励的机会更多哦</span>
<br/>
<a onClick={this._toWallet.bind(this)}
style={{cursor:'pointer',textDecoration: 'underline', color: 'white'}}>
去我的账户查看
</a>
</div>

<div id='redpack-opened'>
<div className='redpack-avatar'>
<img src='http://placehold.it/80x80' alt='头像' width='80' height='80'/>
</div>
</div>
</div>
</div>
);
} else {
// 显示奖励金额
return (
<div className='redpack-container' id='redpack-container'>
<div className='redpack'>
<div className='topcontent-open'>
<div className='redpack-avatar'>
<span id='close'></span>
</div>
<h1 className='white-text' style={{marginTop: 180}}> {bonus.toFixed(2)} </h1>
<span className='redpack-text'>奖励积分已经存入您的账户</span>
<a className='btn-flat white-text' onClick={this._toWallet.bind(this)}
style={{textDecoration: 'underline'}}>
去我的账户查看积分
</a>
</div>

<div id='redpack-opened'>
<div className='redpack-avatar'>
<img src='http://placehold.it/80x80' alt='头像' width='80' height='80'/>
</div>
</div>
</div>
</div>
);
}
}

stopAnimation() {
this.setState({animation: false});
}

showResult() {
this.setState({status: 1});
}

openRedPacket() {
this.setState({animation: true});
setTimeout(this.stopAnimation.bind(this), 3000);
setTimeout(this.showResult.bind(this), 4000);
}

_toWallet() {
// 跳转到钱包
window.location.hash = '/wallet';
}
}

export default ReadPacket;

demo下载地址：redpacket_jb51.rar