vue金额滚动动画
效果预览
QQ20190124-0.gif
<template>
<div>
<div class="head" @click="this.numFun(0,5000)">点击金额变动</div>
<div>{{amount}}</div>
</div>
</<template>
<script>
export default {
data () {
return {
amount: 0
}
}
methods: {
//金额变动动画
numFun(startNum,maxNum) {
var that = this
let numText = startNum;
let golb; // 为了清除requestAnimationFrame
function numSlideFun(){ // 数字动画
numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快
if(numText >= maxNum){
numText = maxNum;
cancelAnimationFrame(golb);
}else {
golb = requestAnimationFrame(numSlideFun);
}
that.amount=numText
// console.log(numText)
}
numSlideFun(); // 调用数字动画
}
}
}
当然vue是一个成熟的孩纸了，也有了属于它的对应的插件vue-count-to：https://www.npmjs.com/package/vue-count-to
这个是相当还用的哦～～推荐推荐
