react(taro)实现数字翻动(滚动)效果

原创

于 2021-12-04 10:59:59 发布 · 3.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #vue.js

本文介绍如何使用CSS和JavaScript实现在数字变化时，通过动画效果逐个显示并移动数字，适合前端开发人员理解并应用于项目中。

前言

因为公司业务需要，数字发生变化的时候就翻动数字进行变化，要有动画效果....

实现效果

实现逻辑

第一步，把数字显示出来

第二步，只显示单个数字，也就是溢出隐藏设置对应的宽高

第三步，移动数字也就是修改定位top值跟加点动画

完结~~~。

实现代码

公共的css代码

.turn_box_container {
  margin-left: 10rpx;
}

.turn_box_container {
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  background-color: red;
}

.turn_box {
  position: absolute;
  lef

最低0.47元/天解锁文章