CSSアニメーションによるテーブルスクロールカルーセル効果の実装

<テンプレート>
  <セクション>
    <div class="box">
      <ul class="header">
        <li class="cell">シリアル番号</li>
        <li class="cell">名前</li>
        <li class="cell">年齢</li>
        <li class="cell">性別</li>
        <li class="cell">プロフェッショナル</li>
      </ul>
      <div class="body">
        <ul class="リスト">
          <li
            v-for="(item, index) in arr"
            :key="インデックス"
            クラス="行"
          >
            <span class="cell">{{ アイテム }}</span>
            <span v-for="(n) in 4" :key="n*30" class="cell">{{ n }}</span>
          </li>
        </ul>
      </div>
    </div>
  </セクション>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      編曲: [],
    }
  },
  作成された() {
    this.arr = Array.from(新しいArray(20), (v, k) => {
      k + 1を返す
    })
    // テーブルには 5 行のデータが表示されます。シームレス性を実現するために、ここでは最初の 5 行のデータをコピーします。this.arr = this.arr.concat(this.arr.slice(0, 5))
  }
}
</スクリプト>

<スタイル lang="scss">
セルの高さ: 30px;
ul {
  リストスタイル: なし;
  マージン: 0;
  パディング: 0;
}
。箱 {
  幅: 60%;
  マージン: 自動;
}
.ヘッダー{
  ディスプレイ: フレックス;
}
。体 {
  高さ: 5 * $cellHeight;
  オーバーフロー: 非表示;
  // パディング下部: 10px;
  li {
    ディスプレイ: フレックス;
    高さ: $cellHeight;
  }
}
.セル{
  フレックス: 1;
  高さ: $cellHeight;
  行の高さ: $cellHeight;
  境界線: 1px 実線 #e2e2e2;
  ボックスのサイズ: 境界線ボックス;
}
.リスト{
  アニメーション: 10 秒の線形無限スクロール。
  位置: 相対的;
}

@keyframes スクロール {
  { 先頭: 0; } から
  〜{ 上: -20 * $cellHeight }
}
</スタイル>