vue实现手机号码抽奖上下滚动动画示例
程序员文章站
2022-07-05 20:50:33
本文介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue 插件的方法代码详解