Beispiel für die Verwendung von CSS3+React zur Implementierung einer Animation zum Öffnen roter Umschläge auf WeChat

黄舟

Freigeben： 2017-05-26 14:20:02

Original

2695 Leute haben es durchsucht

Rote Umschläge von WeChat haben eine Reihe von Marketing-Wahnsinn ausgelöst. Ich glaube, jeder kennt diese Form der roten Umschläge. Hier verwenden wir zunächst Reagieren Öffne die roten Umschläge. AnimationEffekte, damit alle gemeinsam kommunizieren und lernen können

Mit CSS3 rote Umschläge 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);
}

Nach dem Login kopieren

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

Nach dem Login kopieren

Online-Demo: https:// jsbin.com/sawaxid/edi...
Beispiel für die Verwendung von CSS3+React zur Implementierung einer Animation zum Öffnen roter Umschläge auf WeChat

Verwenden Sie React, um verschiedene zu unterscheiden StatusÜbergänge

Bei Implementierung mit React.js wird hauptsächlich gesteuert, ob der rote Umschlag auf das Öffnen wartet oder geöffnet wurde, indem der Status beurteilt wird. Der spezifische Code lautet wie folgt

import React from &#39;react&#39;;

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;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von CSS3+React zur Implementierung einer Animation zum Öffnen roter Umschläge auf WeChat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!