Example of using React and CSS3 to realize the animation effect of opening red envelopes on WeChat (code)

This article mainly introduces the use of React plus CSS3 to realize WeChat red envelope opening animation effect example (code), which has certain reference value. Interested friends can refer to it. one time.

WeChat red envelopes have set off a series of marketing crazes. I believe everyone is familiar with this form of red envelopes. In the spirit of entertainment first, here we use React to simply implement the animation effect of opening red envelopes for everyone to join together. Exchange and study

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 in the figure:

Use React to distinguish different states transitions

Use React.js If implemented, it mainly controls whether the red envelope is waiting to be opened or has been opened by judging the 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: 等待拆开 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 = &#39;/wallet&#39;;
    }
}

export default ReadPacket;

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