React und CSS3 implementieren die WeChat-Animation zum Öffnen roter Umschläge

Dieses Mal werde ich Ihnen React und CSS3 vorstellen, um die Animation zum Öffnen roter Umschläge von WeChat zu implementieren sehen. Rote Umschläge von WeChat haben eine Reihe von Marketing-Wahnsinn ausgelöst. Ich glaube, dass jeder mit dieser Form roter Umschläge vertraut ist. Zunächst verwenden wir React, um den Animationseffekt des Öffnens von Rot zu implementieren Umschläge für alle zum Austauschen und Lernen

Verwenden Sie CSS3, um rote Umschläge zu zeichnen

.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>

Die Der Effekt ist wie folgt:

Verwenden Sie React, um verschiedene Zustandsübergänge zu unterscheidenIf Sie verwenden React.js, um es zu implementieren. Sie beurteilen hauptsächlich den Status. Um zu steuern, ob der rote Umschlag auf das Öffnen wartet oder geöffnet wurde, lautet der spezifische Code wie folgt

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falles in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

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;

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Hintergrundanhängen in CSS

Preisliste für Bootstrap-Implementierung

Wie geht CSS mit dem Standardstil des Browsers um?

Das obige ist der detaillierte Inhalt vonReact und CSS3 implementieren die WeChat-Animation zum Öffnen roter Umschläge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!