vue切换动画,vue数字动态增加
本文主要介绍vue实现数字变换动画的示例代码。文中详细介绍了示例代码，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
最近在开发一个项目的时候，有一个屏保部分，就几个数字太单调了，就简单的加了一些特效。UI图的数字部分如下：
emmm .所以增加了数字动态变化的效果。
一开始我直接在网上抄了一份。但是有些功能满足不了需求，所以，改了一些部分，完美实现。
变化：
1.数字不需要千位字符，但是为了防止以后有，增加了一个参数判断，默认是没有的。
2.整数变化数
3.组件改为内联元素，可以更好地兼容页面样式。
4.第二个数字变化累积在最后一个数字中。
5.添加一个侦听器以防止页面不被更新。
代码如下：
模板
span class=数字增长曲线
span ref= number grow :data-time= time class= number-grow :data-value= value 0/span
/span
/模板
脚本
导出默认值{
名称：数字增长，
道具：{
时间：{
类型：数量，
默认值：2
},
值：{
类型：数量，
默认值：0
},
千位符号：{
类型：布尔型，
默认值：()=false
}
},
data(){
返回{
旧值：0
}
},
观察：{
值：函数(值，旧值){
this.numberGrow(this。$refs.numberGrow)
}
},
方法：{
数字增长(ele) {
让这个=这个
设value=_ this . value-_ this . old value
设步长=(值* 10)/(_this.time * 100)
让电流=0
let start=_this.oldValue
设t=setInterval(function () {
开始=步骤
if (start _this.value) {
间隙(t)
start=_this.value
t=空
}
if(当前===开始){
返回
}
current=parseInt(start)
_this.oldValue=当前
if(_this.thousandSign){
ele.innerHTML=current.toString()。替换(/(\d)(？=(?\d{3}[ ]？)$)/克， $1，)
}否则{
ele.innerHTML=current.toString()
}
}, 10)
}
},
已安装(){
this.numberGrow(this。$refs.numberGrow)
}
}
/脚本
style lang=less 范围。数字增长扭曲{
transform:translate z(0)；
}
/风格
只是酱紫，完美实现。
报价如下：
模板
差异
number grow:value= toNowGantryNum :time= 30 /number grow
/div
/模板
脚本
从“@/components/numberGrow/index . vue”导入number grow
导出默认值{
名称：监视器，
组件：{numberGrow}，
data(){
返回{
toNowGantryNum:1068319425，
}
},
}
/脚本
关于vue数字转换动画的样例代码的这篇文章到此为止。更多关于vue数字转换动画的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。