How to use React+CSS3 to realize the Animation effect of Wechat removing Red packets

This article mainly explains "how to use React+CSS3 to achieve Wechat red packet animation effect", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to use React+CSS3 to achieve the animation effect of opening red packets on Wechat.

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 wallet _ window.location.hash ='/ wallet';}} export default ReadPacket; here, I believe you have a deeper understanding of "how to use React+CSS3 to realize the animation effect of Wechat removing red packets". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!