需求: 新数字小于当前数字时上翻,新数字大于当前数字时下滑
语言描述有限,效果如下图
实现思路:
一次改变,都只上翻或者下滑一个数字。
因此,初始一列只用3个元素,上翻只要设置translateY把11定位到中间位置即可,下滑则把33定位中间。
问题来了,11定位到中间位置后,还要再上翻怎么办?11上面没数字了啊
简单,每当动画完成之后就把第二个数字赋值为当前展示的数字,然后再去掉transition过渡动效,再把第二个数字定位到中间。一切神不知鬼不觉,就回归到初始状态。然后......就可以开启无限流了哈哈哈~
大功告成,最后再在外层设置overflow: hidden;就是文章开始那张效果图了。
最后附上demo code