本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家。具体如下:
document.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;
}
开始
结束
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
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
希望与广大网友互动??
点此进行留言吧!