如何实现大屏数字滚动效果

效果：

思路：

简述：将数字按数组存，比如原来数字是2655，转为数组就是[2,6,5,5],然后循环这个数组，每个数组又创建了1-9数字，再根据数组的值来移动数字的位置

具体：我是用vue来写的，但实际上思路差不多的。

1.原来的数字转为数组,用split('')

   realTime() {
      return `${this.realTimeNum}`.split('') || 0
    },

2.循环原来的四个数字，然后写好对应的样式，每个数组，对应生成竖着排序的0-9

  <div v-for="(item, index) in this.realTime" :key="index" class="real-time-num" 
          > //外层宽高和内层宽高要一样
            <div class="real-time-num-item">
              <div>0</div>
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
            </div>
          </div>

================以下是css部分===============
.real-time-num {
  display: inline-block;
  width: 66px;
  height: 98px;
  background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
}
.real-time-num>div{
  width: 66px;
  height: 98px;
}

像这个效果基本上都做得出来，

之后我们让数字移动到相应的位置，就要用到tranform, 让它移动数字个高度 :style="{transform: `translateY(-${item*98}px)`}"

<div>滚动效果</div>
          <div v-for="(item, index) in this.realTime" :key="index" class="real-time-num"
          >
            <div class="real-time-num-item" :style="{transform: `translateY(-${item*98}px)`}">
              <div>0</div>
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
            </div>
          </div>

得到的效果

然后我们给transform加个过渡效果

.real-time-num-item{
  transition: all 1s ease-out;
}

就会得到以下

之后将框框外的内容都隐藏就好了

.real-time-num {
  display: inline-block;
  width: 66px;
  height: 98px;
  background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
  overflow: hidden; // 隐藏内容
}

就得到开头的效果了