react(taro)实现数字翻动(滚动)效果
前言
因为公司业务需要,数字发生变化的时候就翻动数字进行变化,要有动画效果....
实现效果
实现逻辑
第一步,把数字显示出来
第二步,只显示单个数字,也就是溢出隐藏设置对应的宽高
第三步,移动数字也就是修改定位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;
left: 0;
top: 0;
height: auto;
width: 100%;
transform-origin: 0 0;
transition: top 0.8s;
}
.tur
共有 0 条评论