vuejs实现数字变化上下滚动动画效果⼀、前⾔
js控制css3动画触发在做统计分析的时候，前端需要对⼀串数字进⾏处理，当数字改变，变⼤或者变⼩的时候，能有滚动效果话不多说，直接上代码
⼆、实现
效果（原谅我不会截动图，但是数字上下滚动的效果真的有。。。。）
1、html
<div class="chart-m-l-c">
<label>诉讼参与⼈总数</label>
<div class="count">
<b v-for="(item, index) in prosecutorArr" :key="index">
<div :>
<i v-for="(ic, indexc) in 10" :key="indexc">{{ic-1}}</i>
</div>
</b>
</div>
<span>⼈</span>
<span class="iconfont icon-8" @click="refreshLeft"></span>
</div>
2、css(css使⽤的less)
width: 100%;
height: 60px;
padding: 10px 0;
float: left;
label{
line-height: 40px;
float: left;
font-size: 13px;
font-weight: 600;
}
.count{
height: 60px;
float: left;
padding: 0 5px;
b{
width: 24px;
height: 40px;
float: left;
border: 1px solid #ddd;
color: #000;
text-align: center;
line-height: 40px;
margin: 0 2px;
position: relative;
z-index: 3;
overflow: hidden;
div{
width: 100%;
height: 400px;
position: absolute;
left: 0;
top: 0;
transition: all .8s ease-in-out;
i{
width: 100%;
height: 40px;
float: left;
font-style: normal;
font-size: 18px;
color: #333;
}
}
}
}
span{
line-height: 40px;
float: left;
}
span.iconfont{
width: 40px;
height: 40px;
line-height: 40px;
float: right;
text-align: center;
cursor: pointer;
color: #0071ff;
}
span.iconfont:hover{
color: #5ec2a6;
}
}
3、js（js只写data methods mounted）
return{
prosecutorArr:['0','0','0','0','0','0','0','0'],
//这⾥的数字数组是个8位数，只是占位，不能直接使⽤，看需求有可能是10位或11、12、20等等
numbers:'59832'
//这个参数是后台传给我们的，也不能直接使⽤，需要转换
}
},
methods:{
PrefixInteger(num, length){//给数字前⾯补零⽐如‘59832’补成8位即位‘00059832’
return(Array(length).join('0')+ num).slice(-length);
},
getRandomNumber(min, max){//为了看效果，refreshLeft触发增加数字看效果，和后台数据过来效果⼀样，不管增加或减少
return Math.floor(Math.random()*(max - min +1)+ min)
},
plusNPrAll(){//为了看效果，点击上⾯html中的iconfont触发，refreshLeft⽅法（我真啰嗦~）
const res =this.PrefixInteger(this.numbers,8)
this.prosecutorArr = String().split('')
},
refreshLeft(){//刷新数据，我这⾥因为静态看效果，联调时将请求写在⾥⾯就好了
this.numbers =parseInt(this.numbers)+RandomNumber(1,100)
this.plusNPrAll()
}
},
mounted(){
this.plusNPrAll()
},
三、说明
1、上⾯html+css将个各⾃下⾯对应⽣成10个竖着排的⼩格⼦，然后通过css3的transform和transition来实现数字改变后上下滑动的效果
2、js中的methods前getRandomNumber()⽅法因为我在本地mock为了看效果，和请求后台接⼝改变⼀样的
正常⽐如⽤户当前页想刷新这条数据，触发refreshLeft()⽅法中的接⼝请求即可
3、在页⾯载⼊的时候，mounted中初始化plusNPrAll()⽅法，将数字渲染出来，如果在data中的prosecutorArr: []，为空的话，就⼀开始虽然数字能渲染出来但是没有动画效果的，所以把prosecutorArr数组初始化写成需求对应的长度，都位‘0’即可
四、总结
数字改变的滚动效果完美实现，关于数字的格⼦美化，⼤家可以根据⾃⼰的⾼保真调整css即可。
谢谢观看
祝你⽣活愉快，⼯作顺利()_

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。