一个无缝衔接的css动画

最近写页面的时候有个动画，要求就是表格固定高度，如果数据超出就往上滑动，然后需要无缝衔接，刚开始以为很简单，但是太久没做人整的有点晕，足足花了大半天的时间才弄出来，所以这里记录一下吧。首先来看下效果吧。

下面就分享一些我自己的思路。

template部分

 <table class="table">
          <thead>
            <tr>
              <th>a</th>
              <th>b</th>
              <th>c</th>
              <th>d</th>
              <th>e</th>
              <th>f</th>
              <th>g</th>
            </tr>
          </thead>
          <tbody>
            <div v-for="item in 3" :key="item">
              <tr v-for="(item, index) in problemDetailArr" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.chassisNum }}</td>
                <td>{{ item.color }}</td>
                <td>{{ item.problemDes }}</td>
                <td>{{ item.defectLevel }}</td>
                <td>{{ item.responsibleUnit }}</td>
                <td>{{ item.status }}</td>
              </tr>
            </div>
          </tbody>
        </table>

css部分

 tbody {
          display: block;
          height: 171px;
          position: relative;
          overflow: hidden;
          div {
            position: absolute;
            left: 0;
            top: 0;
            animation: scroll1 12s linear infinite;
            &:nth-child(2) {
              transform: translateY(100%);
              animation: scroll2 12s linear infinite;
            }
            &:last-child {
              transform: translateY(-100%);
              animation: scroll3 12s linear infinite;
            }
            tr {
              height: 40px;
            }
          }


@keyframes scroll1 {
  0% {
    transform: translateY(0);
  }
  33.33% {
    transform: translateY(-100%);
  }
  50% {
    transform: scale(0) translateY(-100%);
  }
  66.66% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll2 {
  0% {
    transform: translateY(100%);
  }
  33.33% {
    transform: translateY(0%);
  }
  66.66% {
    transform: translateY(-100%);
  }
  70% {
    transform: scale(0) translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes scroll3 {
  0% {
    transform: translateY(-100%);
  }
  10% {
    transform: scale(0) translateY(0%);
  }
  33.33% {
    transform: translateY(100%);
  }
  66.66% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

这里我删掉了一些无关紧要的代码，只保留了关键代码。

思路

首先说说页面结构部分，很简单的table，其实表格标签中间不能有表格元素外的其他元素，这里为了做动画所以我稍微的不守规矩了，大家可以根据情况自行更改。

1. 首先为了让表格的tbody设置高度，所以我将tbody更改为了块级元素，然后为了让tbody部分滑动而表头不滑动我这里添加了一个div去包裹表格行。为了达到无缝的效果至少需要三个div元素，这个是我实践得出的结论，如果有大佬有更好的方法欢迎指出。
2. 然后设置初始化位置，首先用定位将位置调整一致，然后用transform去移动位置，第一个在中间，第二个在下面，第三个在上面,因为使用的transform所以是以自身为单位的所以不用担心数据变化导致的移位。
3. 开始编写动画，动画过程基本上就是三步，第一步元素自身的顶部从视口的底部出现移动到元素底部和视口顶部相交，第二步就是隐藏元素，这一步是为了让用户看不到元素复位的过程，最后一部就是复位。

动画步骤解析

这里我们以第一个元素进行步骤解析：
1.0%也就是初始点，元素保持不动，元素的顶部和视口的顶部重合。
2.33.33%第二个点，元素向上移动自身的100%,第一步到第二步一共花费总时长的三分之一，这个过程就是元素离开视口的过程。
3.50%第三个点，此时用户已经看不到该元素了,然后隐藏元素，这个数字是随便定的，只要确保元素移动到待选区域的时间是三分之一且不可见即可。
4.66.66%第四个点，元素移动到离初始位置下自身的100%的地方，到了这一步元素才能保证元素出现在用户的视口和离开用户的视口的距离是一致的。
5.100%第五个点也是动画的最后一部，这个值必须得保证和第一个点的值是一样的，只有这样才能保证改动画是一个完整的循环。这一部元素从下方区域移动到第一步的位置，就是元素出现在用户视口的过程，这个过程也要保证进度是整个进度的三分之一。

其余的两个动画原理和和上面的一致，只是顺序有所不同而已。