React项目实战（四）滚动的数字-白红宇

需求

分析：我们要实现一个数字滚动效果，保证每个位上的数字都至少滚动一周，滚动效果是自下往上。让我们先思考一下几个细节：

① 方案的选取：css？js?

② 滚动的内容是什么？如果使用css动画用什么实现，如果使用js用什么实现？

③ 怎么实现每个位上的数字依次停止？

目前实现

基于background-position-y实现定位到具体数字，使用transition-duration实现每个位上的数字依次暂停，模仿掘金页面的实现效果如下：

可以跳过的一节

说一下我的思路历程吧，我一开始居然没想到用动画来实现，而是用setTimeout递归地插入每个位上的数字，写完之后才发现没有实现滚动。然后又search了一下滚动效果，发现了一个HTML标签<marquee>，虽然我在浏览器上可以用，但是MDN提示我们这个标签已废弃惹。好吧，一开始就应该想到动画的。

预备知识

react提供了一个react-transition-group库，我们可以通过几种方式实现

定义className结合css样式

//官方案例function App() {  const [inProp, setInProp] = useState(false);  return (    
              
                 
          
                     {"I'll receive my-node-* classes"}        
          
      
               
             
        
  );}复制代码

.my-node-enter {  opacity: 0;}.my-node-enter-active {  opacity: 1;  transition: opacity 200ms;}.my-node-exit {  opacity: 1;}.my-node-exit-active {  opacity: 0;  transition: opacity 200ms;}复制代码

使用钩子
- 进入状态：onEnter、onEntering、onEntered
- 退出状态：onExit、onExiting、onExited

css的background属性

属性	值	作用
background-size	length\|percentage\|cover\|contain	规定背景图像的尺寸,可用于自适应
background-repeat	repeat\|repeat-x\|repeat-y\|no-repeat\|inherit	定义了图像的平铺模式
background-image	url	元素设置背景图像

具体实现

背景图片的设置
因为找不到掘金的图片，所以自己用ps做了一个24px ✖ 480px的背景图片，在实际使用中，我们要记住这个长宽比是1:2,方便后面做自适应调整，初始style设置如下：
```
span {    display: inline-block;    background-image: url("number-bg-24-480.png");    background-repeat: repeat-y;    background-position: center 0;    background-size: 1.5rem 30rem;    width: 1.5rem;    height: 3rem;}复制代码
```

切分字符串为数组

this.setState({   data: nextProps.str.split('') })复制代码

具体动画设置：回顾一下我们预先定义的每个位上数字大小为1.5rem ✖ 3rem，那么总长度为30rem，我们要使得每个数字至少自下而上滚动一周，最后依次停止，具体设置如下：


      
           {
     this.state.data.map((val, index) => {        return (        
       
         {              e.style.backgroundPositionY=`0`            }}            onEntering={              e => {                e.style.backgroundPositionY=`${-3*val - 30}rem`                e.style.transitionProperty="background-position-y"                e.style.transitionDuration=`${(index+1)*this.state.delay}ms`                e.style.transitionTimingFunction="ease-out"              }            }          >            
                
               )     })}
      复制代码

大功告成啦，虽然是一个很简单的小动画，看起来还是很炫酷的嘛，顺带回顾了一下css的一些基础知识。