vue实现手机号码抽奖上下滚动动画示例


Posted in Javascript onOctober 18, 2017

本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家。具体如下:

<!DOCTYPE>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Document</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/mui.css" rel="external nofollow" />
  <style type="text/css">
    .in-out-translate-demo-wrapper {
      position: relative;
      height: 58px;
    }
    
    .in-out-translate-demo-wrapper button {
      position: absolute;
    }
    
    .in-out-translate-fade-enter-active,
    .in-out-translate-fade-leave-active {
      transition: all .5s;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
    }
    
    .in-out-translate-fade-enter,
    .in-out-translate-fade-leave-active {
      opacity: 0;
    }
    
    .in-out-translate-fade-enter {
      transform: translateX(54px);
      -webkit-transform: translateX(54px);
      -moz-transform: translateX(54px);
      -o-transform: translateX(54px);
    }
    
    .in-out-translate-fade-leave-active {
      transform: translateX(-54px);
      -webkit-transform: translateX(-54px);
      -moz-transform: translateX(-54px);
      -o-transform: translateX(-54px);
    }
    
    .down-up-translate-fade-enter-active,
    .down-up-translate-fade-leave-active {
      transition: all .1s;
      -webkit-transition: all .1s;
      -moz-transition: all .1s;
      -o-transition: all .1s;
    }
    
    .down-up-translate-fade-enter,
    .down-up-translate-fade-leave-active {
      opacity: 1;
    }
    
    .down-up-translate-fade-enter {
      /*transform: translateY(40px);
      -webkit-transform: translateY(40px);
      -moz-transform: translateY(40px);
      -o-transform: translateY(40px);*/
    }
    
    .down-up-translate-fade-leave-active {
      transform: translateY(-50px);
      -webkit-transform: translateY(-50px);
      -moz-transform: translateY(-50px);
      -o-transform: translateY(-50px);
    }
    
    .num {
      /*position: relative;*/
      width: 100%;
      height: 50px;
      overflow: hidden;
    }
    
    .num .span {
      /*position: absolute;*/
      background: #0062CC;
      color: #fff;
      width: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 40px;
      font-weight: bold;
      float: left;
      margin-right: 2px;
    }
    
    .num .span div {
      background: #0062CC;
      color: #fff;
      width: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 40px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="demo" class="demo">
    <div class="in-out-translate-demo-wrapper mui-text-center">
      <transition name="in-out-translate-fade">
        <button v-if="show" v-on:click="start" key="start" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button>
        <button v-else key="end" v-on:click="end" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button>
      </transition>

    </div>
    <div class="num mui-text-center">
      <div class="span">
        <div>1</div>
      </div>       
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="i">{{i}}</div>
        </transition>
      </div>
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="j">{{j}}</div>
        </transition>
      </div>
      <div class="span">
        <div>*</div>
      </div>
      <div class="span">
        <div>*</div>
      </div> 
      <div class="span">
        <div>*</div>
      </div> 
      <div class="span">
        <div>*</div>
      </div>         
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="k">{{k}}</div>
        </transition>
      </div>
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="l">{{l}}</div>
        </transition>
      </div> 
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="i">{{i}}</div>
        </transition>
      </div>
      <div class="span">
        <transition name="down-up-translate-fade">
          <div :key="j">{{j}}</div>
        </transition>
      </div>       
    </div>
  </div>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>-->
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    new Vue({
      el: '#demo',
      data: {
        show: true,
        i: 0,
        j:0,
        k: 0,
        l: 0,
        interval: null
      },
      methods: {
        start: function() {
          this.show = !this.show
          var _this = this;

          if(!this.interval) {
            this.interval = setInterval(function() {
              _this.i = Math.floor(Math.random() * 10);
              _this.j = Math.floor(Math.random() * 10);
              _this.k = Math.floor(Math.random() * 10);
              _this.l = Math.floor(Math.random() * 10);
            }, 10)
          }
        },
        end: function() {
          this.show = !this.show

          clearInterval(this.interval)
          this.interval = null
        }
      }
    })
  </script>
</body>

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

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 #Javascript
浅谈Node异步编程的机制
Oct 18 #Javascript
js实现随机点名系统(实例讲解)
Oct 18 #Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 #Javascript
详谈commonjs模块与es6模块的区别
Oct 18 #Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 #Javascript
详解http访问解析流程原理
Oct 18 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
对Python 数组的切片操作详解
2018/07/02 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
社区国庆节活动总结
2015/03/23 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis