Detailed example of using React and CSS3 to realize the animation effect of opening red envelopes on WeChat

This article mainly introduces the use of React and CSS3 to achieve the animation effect of opening red envelopes on WeChat. WeChat red envelopes have triggered a series of marketing crazes. I believe everyone is familiar with this form of red envelopes. Here, we use React to make it simple in the spirit of entertainment first. The animation effect of opening red envelopes has been realized. I hope it can help everyone.

Use CSS3 to draw red envelopes

.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% 50% / 10px 10px 15% 15%;
    box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
}
#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);
}

<p class=&#39;redpack&#39;>
  <!--  红包的顶部盖子 -->
  <p class="topcontent"></p>
  <!-- 拆红包的按钮 -->
  <p id="redpack-open"></p>
</p>

The effect is as shown:

Use React to distinguish different state transitions

If implemented with React.js, the state is mainly used to control whether the red envelope is waiting to be opened or has been opened. 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: 等待拆开 1: 拆开后
        };
    }

    render() {
        var bonus = this.props.thanks ? 0 : parseFloat(this.props.surveyInfo.bonus);

        if(this.state.status == 0) {
            return (
                <p className=&#39;redpack-container&#39; id=&#39;redpack-container&#39;>
                    <p className=&#39;redpack&#39;>
                        <p className=&#39;topcontent&#39;>
                            <p id=&#39;redpack-opened&#39;>
                              <p className=&#39;redpack-avatar&#39;>
                                <img src=&#39;http://placehold.it/80x80&#39; alt=&#39;头像&#39; width=&#39;80&#39; height=&#39;80&#39;/>
                              </p>
                            </p>
                            <h2 style={{marginTop: 80, color: &#39;white&#39;}}>奖励</h2>
                            <span className=&#39;redpack-text&#39;>点击下方按钮领取红包</span>
                            <p className=&#39;redpack-description white-text&#39;>恭喜发财 大吉大利</p>
                        </p>

                        <p id=&#39;redpack-open&#39; className={this.state.animation ? &#39;rotate&#39; : &#39;&#39;}
                             onClick={this.openRedPacket.bind(this)}
                        >
                            <span>拆红包</span>
                        </p>
                    </p>
                </p>
            );
        } else if (bonus == 0) {
            // 谢谢参与
            return (
                <p className=&#39;redpack-container&#39; id=&#39;redpack-container&#39;>
                    <p className=&#39;redpack&#39;>
                        <p className=&#39;topcontent-open&#39;>
                            <p className=&#39;redpack-avatar&#39;>
                                <span id=&#39;close&#39;></span>
                            </p>
                            <h1 style={{marginTop: 180, color: &#39;white&#39;}}> 谢谢参与 </h1>
                            <span className=&#39;redpack-text&#39;>多多参与的奖励的机会更多哦</span>
                            <br/>
                            <a onClick={this._toWallet.bind(this)}
                               style={{cursor:&#39;pointer&#39;,textDecoration: &#39;underline&#39;, color: &#39;white&#39;}}>
                                去我的账户查看
                            </a>
                        </p>

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

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

    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;

Related recommendations:

How to write HTML escaping in React

How to implement ReactJS to monitor page scroll events

React event system knowledge

The above is the detailed content of Detailed example of using React and CSS3 to realize the animation effect of opening red envelopes on WeChat. For more information, please follow other related articles on the PHP Chinese website!