zookeeper python接口实例详解
319
2023-03-25
vue实现手机号码抽奖上下滚动动画示例
本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家。具体如下:
.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);
QiCfLGc -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;
}
<transition name="down-up-translate-fade">
http://
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
}
}
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~