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

   <title>Document</title> .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-transfo<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码@网&</strong>rm: 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; }  <div id="demo" class="demo"> <div class="in-out-translate-demo-wrapper mui-text-center">  <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button><button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button></div><div class="num mui-text-center"> <div class="span"> <div>1</div></div><div class="span">  <div>{{i}}</div></div><div class="span">  <div>{{j}}</div></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">  <div>{{k}}</div></div><div class="span">  <div>{{l}}</div></div><div class="span">  <div>{{i}}</div></div><div class="span">  <div>{{j}}</div></div></div></div>