用React加CSS3实现微信拆红包动画效果


Posted in HTML / CSS onMarch 13, 2017

微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习

用CSS3绘制红包

.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);
}
<div class='redpack'>
  <!--  红包的顶部盖子 -->
  <div class="topcontent"></div>
  <!-- 拆红包的按钮 -->
  <div id="redpack-open"></div>
</div>

效果如图:

用React加CSS3实现微信拆红包动画效果

用React来区分不同的状态的转换

用React.js来实现的话,主要通过判断state来控制红包现在是等待拆开还是已经拆开过,具体的代码如下

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 (
                <div className='redpack-container' id='redpack-container'>
                    <div className='redpack'>
                        <div className='topcontent'>
                            <div id='redpack-opened'>
                              <div className='redpack-avatar'>
                                <img src='http://placehold.it/80x80' alt='头像' width='80' height='80'/>
                              </div>
                            </div>
                            <h2 style={{marginTop: 80, color: 'white'}}>奖励</h2>
                            <span className='redpack-text'>点击下方按钮领取红包</span>
                            <div className='redpack-description white-text'>恭喜发财 大吉大利</div>
                        </div>

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

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

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

    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;

demo下载地址:redpacket_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 #HTML / CSS
You might like
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
10张动图学会python循环与递归问题
2021/02/06 Python
学校就业推荐信范文
2014/05/19 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
村安全生产责任书
2014/08/25 职场文书
社区元宵节活动总结
2015/02/06 职场文书
《花钟》教学反思
2016/02/17 职场文书