数字滚动动画效果vue组件化
主要思路是利⽤css属性writing-mode：vertical-lr；通过设定最⼤字符长度，补零，去循环，然后添加style translate和transition来完成想要的效果；
⼦组件根据⽗组件传给的数值，⽗或者⼦刷新这个定时器都可以，以下我们的demo将在⼦组件进⾏定时刷新；
⾸先⼦组件dom结构：
css样式：
然后就是⼦组件接收⽗组件传给的值，默认值给0：
定义所需数据：
vue逗号分割的字符串转数组初始化的时候执⾏定时刷新，结束时记得清空定时器；建议定时器放在⽗组件，这⾥只是为了展⽰效果所以放在⼦组件。
还有就是，⽗组件传来新的值时，需要触发⼦组件刷新，这⾥我们在⼦组件⽤watch监听下，执⾏下相应⽅法：
⽗组件调⽤下并传⼊相应值就可以了：
⽗组件传值有变化时，数字会⾃动滚动到相应位置：动画时间可以⾃⼰设定，效果如图所⽰：
此组件刚发现有个兼容性问题，css样式⾥的
text-orientation：upright；在safari浏览器中并不⽣效，曲线救国就是改变dom结构：
就可以了。

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