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中的对象化编程
Jan 16 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue实现拖拽交换位置
Apr 07 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设计模式 Composite (组合模式)
2011/06/26 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
newxtree.js代码
2007/03/13 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
Java中实现多态的机制
2015/08/09 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
C# Debug和Testing相关面试题
2015/10/25 面试题
婚礼主持词
2014/03/13 职场文书
教师产假请假条
2014/04/10 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书