vue 数字动画递增_数字滚动动画效果 vue组件化

主要思路是利用css属性writing-mode：vertical-lr；通过设定最大字符长度，补零，去循环，然后添加style translate和transition来完成想要的效果；

子组件根据父组件传给的数值，父或者子刷新这个定时器都可以，以下我们的demo将在子组件进行定时刷新；

首先子组件dom结构：

css样式：

然后就是子组件接收父组件传给的值，默认值给0：

定义所需数据：

初始化的时候执行定时刷新，结束时记得清空定时器；建议定时器放在父组件，这里只是为了展示效果所以放在子组件。

还有就是，父组件传来新的值时，需要触发子组件刷新，这里我们在子组件用watch监听下，执行下相应方法：

父组件调用下并传入相应值就可以了：

父组件传值有变化时 ，数字会自动滚动到相应位置：动画时间可以自己设定，效果如图所示：

此组件刚发现有个兼容性问题，css样式里的

text-orientation：upright；在safari浏览器中并不生效，曲线救国就是改变dom结构：

就可以了。