vue实现数字变换动画的示例代码

最近开发项目的时候有个屏保的部分,就几个数字觉得过于单调,索性加点特效在里边,UI图数字部分如下:

vue实现数字变换动画的示例代码_第1张图片

emmm。所以加了个数字动态变动的效果

一开始直接在网上copy了一份。但是部分功能不太能满足需求 ,so,改动了部分,完美实现

改动部分:

1.数字不需要千位符,但是为了防止以后要有 所以加了个参数判断,默认是没有的

2.数字整数变动

3.组件改为行内元素,能更好的兼容页面样式

4.第二次数字变动在上次的数字累加

5.添加监听器防止页面不更新的情况

代码如下:






就酱紫,完美实现。

引用如下:



到此这篇关于vue实现数字变换动画的示例代码的文章就介绍到这了,更多相关vue 数字变换动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue实现数字变换动画的示例代码)