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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
js实现无缝轮播图
Mar 09 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
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
多文件上载系统完整版
2006/10/09 PHP
使用 php4 加速 web 传输
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
jQuery列表拖动排列具体实现
2013/11/04 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
前端性能优化及技巧
2016/05/06 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
wxpython实现图书管理系统
2018/03/12 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python ellipsis 的用法详解
2020/11/20 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
现金出纳岗位职责
2014/03/15 职场文书
会计系毕业生求职信
2014/05/28 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
发布会邀请函
2015/01/31 职场文书
教师节主持词开场白
2015/05/29 职场文书
保护环境的宣传语
2015/07/13 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android