Vue3はCSSの無限シームレススクロール効果を実装します

<div class="リストコンテナ">
  <div class="marquee" id="carList">
    <template v-for="(item, index) in dataMap.list" :key="index">
      <div class="リスト項目">
        <div class="item-name text-overflow">{{ item.name }}</div>
        <div class="item-road text-overflow">{{ item.road }}</div>
      </div>
    </テンプレート>
  </div>
</div>

エクスポートデフォルトdefineComponent({
  設定（） {
    constデータマップ = リアクティブ({
      リスト: [
        { 名前: '浙A89268', 道路: '游8路', ステータス: 0 },
        { 名前: '浙A89268', 道路: '游8路', ステータス: 0 },
        { 名前: '浙A89268', 道路: '游8路', ステータス: 1 },
        { 名前: '浙A89268', 道路: '游8路', ステータス: 0 },
        { 名前: '浙A89268', 道路: '游8路', ステータス: 1 },
        { 名前: '浙A89268', 道路: '游1路', ステータス: 0 },
      ]、
    });
    マウント時(() => {
      const マーキー = document.getElementById('carList');
      marquee.innerHTML は、次の HTML 要素で構成されます。
    });
  }
})

.リストコンテナ{
  幅: 720ピクセル;
  高さ: 170ピクセル;
  左マージン: 13px;
  オーバーフロー: 非表示;
  位置: 相対的;
}
//無限スクロール.marquee {
  //アニメーション遅延: -5秒;
  アニメーション: マーキー 15 秒 リニア 無限;
}
.marquee:hover {
  アニメーション再生状態: 一時停止;
}
@keyframes マーキー {
  0% {
    変換: translateY(0%);
  }
  100% {
    transform: translateY(-51%); //これは -100% ではありません。
  }
}