好资源导航 » 文章资讯 » vue实现手机号码抽奖上下滚动动画示例

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

2023-09-23 01:06:05 119

本文介绍了vue实现手机号码抽奖上下滚动动画示例，分享给大家。具体如下：






Document



.in-out-translate-demo-wrapper{
position:relative;
height:58px;
}

.in-out-translate-demo-wrapperbutton{
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.spandiv{
background:#0062CC;
color:#fff;
width:30px;
height:50px;
line-height:50px;
font-size:40px;
font-weight:bold;
}







开始
结束

{{j}} newVue({ 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 } } })

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐