CSS|vue实现简单数字滚动特效 javascript|vue

vue实现简单数字滚动特效今日项目中要求要做一个数字滚动的特效，增加页面的丰富度
期望是一个价格数量中的每个数组都可以滚动显示的特效，如下图：

文章图片

下面是一个简单的例子：

知识点：CSS动画

采用scss预编译语言编写css

.scroll-warpper { display: inline-block; vertical-align: middle; transition-duration: .3s; .scroll-item { overflow: hidden; height: 20px; float: left; margin: 0 2px; .scroll-num-warpper { transform: translateY(20px); transition-duration: 1s; &.num-dot { transform: translateY(0); } &.num-0 { transform: translateY(-20px); } &.num-1 { transform: translateY(-40px); } &.num-2 { transform: translateY(-60px); } &.num-3 { transform: translateY(-80px); } &.num-4 { transform: translateY(-100px); } &.num-5 { transform: translateY(-120px); } &.num-6 { transform: translateY(-140px); } &.num-7 { transform: translateY(-160px); } &.num-8 { transform: translateY(-180px); } &.num-9 { transform: translateY(-200px); } .scroll-num { height: 20px; padding: 0 2px; line-height: 20px; display: block; font-weight: 700; color: #fff; background-color: #52ccba; } } } }

组件使用方式

export default { data() { return { price: '12341.12' } } }

完整代码

.scroll-warpper { display: inline-block; vertical-align: middle; transition-duration: .3s; .scroll-item { overflow: hidden; height: 20px; float: left; margin: 0 2px; .scroll-num-warpper { transform: translateY(20px); transition-duration: 1s; &.num-dot { transform: translateY(0); } &.num-0 { transform: translateY(-20px); } &.num-1 { transform: translateY(-40px); } &.num-2 { transform: translateY(-60px); } &.num-3 { transform: translateY(-80px); } &.num-4 { transform: translateY(-100px); } &.num-5 { transform: translateY(-120px); } &.num-6 { transform: translateY(-140px); } &.num-7 { transform: translateY(-160px); } &.num-8 { transform: translateY(-180px); } &.num-9 { transform: translateY(-200px); } .scroll-num { height: 20px; padding: 0 2px; line-height: 20px; display: block; font-weight: 700; color: #fff; background-color: #52ccba; } } } }

【CSS|vue实现简单数字滚动特效】