本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家。具体如下:
& lt; ! DOCTYPE>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> Document
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/mui.css " rel=巴獠縩ofollow”/比;
& lt;风格类型=" text/css "比;
.in-out-translate-demo-wrapper {
位置:相对;
高度:58 px;
}
.in-out-translate-demo-wrapper按钮{
位置:绝对的;
}
.in-out-translate-fade-enter-active,
.in-out-translate-fade-leave-active {
过渡:0;
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
}
.in-out-translate-fade-enter,
.in-out-translate-fade-leave-active {
透明度:0;
}
.in-out-translate-fade-enter {
变换:translateX (54 px);
-webkit-transform: translateX (54 px);
-moz-transform: translateX (54 px);
-o-transform: translateX (54 px);
}
.in-out-translate-fade-leave-active {
变换:translateX (-54 px);
-webkit-transform: translateX (-54 px);
-moz-transform: translateX (-54 px);
-o-transform: translateX (-54 px);
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
过渡:1。;
-webkit-transition: 1。;
-moz-transition: 1。;
-o-transition: 1。;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
透明度:1;
}
.down-up-translate-fade-enter {/*变换:translateY (40 px);
-webkit-transform: translateY (40 px);
-moz-transform: translateY (40 px);
-o-transform: translateY (40 px); */}
.down-up-translate-fade-leave-active {
变换:translateY (-50 px);
-webkit-transform: translateY (-50 px);
-moz-transform: translateY (-50 px);
-o-transform: translateY (-50 px);
}
.num {/*位置:相对;*/宽度:100%;
高度:50 px;
溢出:隐藏;
}
.num .span {/*位置:绝对。*/背景:# 0062 cc的;
颜色:# fff;
宽度:30 px;
高度:50 px;
行高:50 px;
字体大小:40像素;
粗细:大胆的;
浮:左;
margin-right: 2 px;
}
.num .span div {
背景:# 0062 cc的;
颜色:# fff;
宽度:30 px;
高度:50 px;
行高:50 px;
字体大小:40像素;
粗细:大胆的;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=把菔尽眂lass=把菔尽北?
& lt; div class=" in-out-translate-demo-wrapper mui-text-center”比;
& lt;过渡name=" in-out-translate-fade比;
& lt;按钮v="显示" v:点击="开始"键=翱肌崩嘈?鞍磁ァ崩?癿ui-btn mui-btn-blue mui-btn-outlined”在开始& lt;/button>
& lt;按钮v-else关键="结束" v:点击=敖崾崩嘈?鞍磁ァ崩?癿ui-btn mui-btn-yellow mui-btn-outlined”祝辞结束& lt;/button>
& lt;/transition>
& lt;/div>
& lt; div类=" num mui-text-center "比;
& lt; div类=翱缍取北?
& lt; div> 1 & lt;/div>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键="我"在{{我}}& lt;/div>
& lt;/transition>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键=" j "在{{j}} & lt;/div>
& lt;/transition>
& lt;/div>
& lt; div类=翱缍取北?
& lt; div> * & lt;/div>
& lt;/div>
& lt; div类=翱缍取北?
& lt; div> * & lt;/div>
& lt;/div>
& lt; div类=翱缍取北?
& lt; div> * & lt;/div>
& lt;/div>
& lt; div类=翱缍取北?
& lt; div> * & lt;/div>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键=" k "在{{k}} & lt;/div>
& lt;/transition>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键=發”在{{l}} & lt;/div>
& lt;/transition>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键="我"在{{我}}& lt;/div>
& lt;/transition>
& lt;/div>
& lt; div类=翱缍取北?
& lt;过渡name=" down-up-translate-fade比;
& lt; div:关键=" j "在{{j}} & lt;/div>
& lt;/transition>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——& lt;脚本src=" https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js "祝辞& lt;/script>——比;
& lt;脚本src=" https://www.yisu.com/zixun/js/vue.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
新Vue ({
艾尔:#演示,
数据:{
显示:没错,
我:0,
j: 0,
凯西:0,
李:0,
间隔:零
}，
方法:{
开始:函数(){
这一点。展示=! this.show
var _this=;
如果(! this.interval) {
this.interval=setInterval(函数(){
_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)
}
}，
结束:函数(){
这一点。展示=! this.show
clearInterval (this.interval)
this.interval=零
}
}
}）
& lt;/script>
& lt;/body>
