vue实现手机号码抽奖上下滚动动画示例
时间:2019-04-07
本文章向大家介绍vue实现手机号码抽奖上下滚动动画示例,主要包括vue实现手机号码抽奖上下滚动动画示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 你真了解你的系统吗?它要崩溃了
- 伸手党的容器镜像加固流程
- 前端模块化开发--React框架(四):高级应用(redux)
- Tomcat性能优化,学会薪水翻倍
- 前端模块化开发--React框架(三):应用进阶(react-router4&&antd框架)
- boost asio通信
- 前端模块化开发--React框架(二):脚手架&&网络请求框架
- Dubbo系列笔记之服务引用过程,不服不行
- 人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理
- Xcode12适配The linked library is missing one or more architectures required by this target问题
- [译] VueJS 中更好的组件组合方式
- 无异常日志,就不能排查问题了???
- 带你跳出源码地狱,从原理上理解MyBatis对Spring源码的扩展实现
- 网上翻译嫌麻烦?Python破解有道JS加密,让你随时能翻译
- 前端模块化开发--React框架(一): 入门和面向组件编程