Implementieren eines Tabellen-Scrollkarusselleffekts durch CSS-Animation

<Vorlage>
  <Abschnitt>
    <div Klasse="Box">
      <ul Klasse="Header">
        <li class="cell">Seriennummer</li>
        <li class="cell">Name</li>
        <li class="cell">Alter</li>
        <li class="cell">Geschlecht</li>
        <li class="cell">Professionell</li>
      </ul>
      <div Klasse="Körper">
        <ul Klasse="Liste">
          <li
            v-for="(Element, Index) in arr"
            :Schlüssel="Index"
            Klasse="Zeile"
          >
            <span class="cell">{{ Element }}</span>
            <span v-for="(n) in 4" :key="n*30" class="cell">{{ n }}</span>
          </li>
        </ul>
      </div>
    </div>
  </Abschnitt>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      arr: [],
    }
  },
  erstellt() {
    dies.arr = Array.from(neues Array(20), (v, k) => {
      Rückgabewert k + 1
    })
    // Die Tabelle zeigt 5 Datenzeilen. Hier kopieren wir die ersten 5 Datenzeilen, um Nahtlosigkeit zu erreichen this.arr = this.arr.concat(this.arr.slice(0, 5))
  }
}
</Skript>

<style lang="scss">
$Zellenhöhe: 30px;
ul {
  Listenstil: keiner;
  Rand: 0;
  Polsterung: 0;
}
.Kasten {
  Breite: 60%;
  Rand: automatisch;
}
.header {
  Anzeige: Flex;
}
.Körper {
  Höhe: 5 * $Zellenhöhe;
  Überlauf: versteckt;
  // Polsterung unten: 10px;
  li {
    Anzeige: Flex;
    Höhe: $cellHeight;
  }
}
.Zelle {
  biegen: 1;
  Höhe: $cellHeight;
  Zeilenhöhe: $cellHeight;
  Rand: 1px durchgezogen #e2e2e2;
  Box-Größe: Rahmenbox;
}
.Liste {
  Animation: 10 s lineares Scrollen, unendlich;
  Position: relativ;
}

@keyframes scrollen {
  von { top: 0; }
  zu { oben: -20 * $Zellenhöhe }
}
</Stil>