vue实现手机号码抽奖上下滚动动画示例
本文介绍了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; } 开始 结束
1