用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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
Css预编语言及区别详解
Apr 25 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
js密码强度校验
2015/11/10 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python绘制双柱形图代码实例
2017/12/14 Python
Django视图扩展类知识点详解
2019/10/25 Python
python实现淘宝购物系统
2019/10/25 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python输入中文的实例方法
2020/09/14 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
护理自我鉴定范文
2013/10/06 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
国庆节标语大全
2014/10/08 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL