Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-03-22 10:23:52
Original
2389 Leute haben es durchsucht

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);
}
Nach dem Login kopieren
<p class=&#39;redpack&#39;>
  <!--  红包的顶部盖子 -->
  <p class="topcontent"></p>
  <!-- 拆红包的按钮 -->
  <p id="redpack-open"></p>
</p>
Nach dem Login kopieren
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;
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!