How to use React and CSS3 to realize the animation effect of Wechat removing red packets

This article introduces the "how to use React plus CSS3 to achieve Wechat red packet animation effect" related knowledge, in the actual case of the operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Draw red packets with CSS3

.redpack {height: 450px; background: # A5423A; width: 300px; left: 0; top: 0; border-radius: 10px; margin: 0 auto;}. Topcontent {height: 300px; border: 1px solid # BD503A; background-color: # BD503A; border-radius: 10px 10px 50% / 10px 10px 15%; box-shadow: 0px 4px 0px-1px rgba;} # redpack-open {width: 100px; height: 100px Border: 1px solid # FFA73A; background-color: # FFA73A; border-radius: 50%; color: # fff; font-size: 20px; display: inline-block; margin-top:-50px; box-shadow: 0px 4px 0px 0px rgba (0,0,0,0.2);}

The effect is as shown in the figure:

Using React to distinguish the transition of different states

If you implement it with React.js, you can mainly control whether the red packet is waiting to be opened or has been opened by judging state. The specific code is as follows

Import React from 'react';class ReadPacket extends React.Component {constructor (props) {super (props); this.state = {animation: false, status: 0 / 0: waiting for disassembly 1: after dismantling};} render () {var bonus = this.props.thanks? 0: parseFloat (this.props.surveyInfo.bonus) If (this.state.status = = 0) {return (

Reward Click the button below to receive the red packet. Good luck to open the red packet. } else if (bonus = = 0) {/ / Thank you for participating in return ( Thank you for participating in the reward for more participation. More opportunities. Oh, check my account.

); } else {/ / display award amount return ({ Bonus.toFixed (2)} bonus points have been deposited in your account to check the points in my account.

);}} 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 () {/ / Jump to the wallet _ window.location.hash ='/ wallet';}} export default ReadPacket; "how to use React plus CSS3 to achieve the animation effect of removing red packets on Wechat" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!