vue实现数字动态翻牌器 vue实现数字动态翻牌器

数字动态翻牌器最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器
【vue实现数字动态翻牌器】第一步创建一个组件页面，NumberCount.vue
思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码

/*总量滚动数字设置*/.box-item {position: relative; height: 34px; font-size: 20px; font-family: AzonixRegular; color: #021c25; line-height: 41px; text-align: center; list-style: none; writing-mode: vertical-lr; text-orientation: upright; }/* 默认逗号设置 */.mark-item {width: 28px; height: 34px; position: relative; /* 背景图片 */background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat centercenter; background-size: 100% 100%; list-style: none; margin-right: 1px; & > span {position: absolute; width: 100%; height: 100%; bottom: 2px; left: 20%; font-size: 20px; writing-mode: vertical-rl; text-orientation: upright; }}/*滚动数字设置*/.number-item {width: 28px; height: 34px; /* 背景图片 */background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat centercenter; background-size: 100% 100%; // background: #ccc; list-style: none; margin-right: 1px; & > span {position: relative; display: inline-block; margin-right: 10px; width: 100%; height: 100%; writing-mode: vertical-rl; text-orientation: upright; overflow: hidden; display: flex; align-items: center; justify-content: center; & > i {font-style: normal; position: absolute; top: 8px; left: 50%; transform: translate(-50%, 0); transition: transform 1s ease-in-out; letter-spacing: 10px; }}}.number-item:last-child {margin-right: 0; }

不加逗号：