编程 Javascript

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>

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

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

- Author -

明天的天明

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 容错处理代码, 屏蔽错误信息

Mar 09 Javascript

网页中的图片的处理方法与代码

Nov 26 Javascript

Javascript Object.extend

May 18 Javascript

某页码显示的helper 少量调整，另附js版

Sep 12 Javascript

js防止表单重复提交的两种方法

Sep 30 Javascript

Javascript变量作用域详解

Dec 06 Javascript

js判断手机和pc端选择不同执行事件的方法

Jan 30 Javascript

深入浅析JavaScript面向对象和原型函数

Feb 06 Javascript

使用struts2+Ajax+jquery验证用户名是否已被注册

Mar 22 Javascript

javascript仿京东导航左侧分类导航下拉菜单效果

Nov 25 Javascript

基于JavaScript实现屏幕滚动效果

Jan 18 Javascript

jQuery子选择器与可见性选择器实例分析

Jun 28 jQuery

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