文字循环横向滚动

需求

文字循环进行滚动，文字的数量不定

实现

css实现

这种方式最简单，但如果文字多了，超出的部分不会显示

<div class="nbon-container">-->
  测试1测试2测试3测试4测试5测试6测试7测试8测试9测试10测试11测试12测试13测试14测试15
  </div>

.nbon-container{
    padding-left: 100%;
    display: inline-block;
    white-space: nowrap;
    animation: 10s rowLeft linear infinite;
  }
  @keyframes rowLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

vue-marquee-text-component文本字幕组件

文档：https://evodiaaut.github.io/vue-marquee-text-component/

优点： 使用简单，文字多的时候也能全部显示

缺点： 文字少的时候，滚动速度很慢，文字多的时候滑动速度快

  <marquee-text :duration="30">
    测试111
  </marquee-text>
  
  import marqueeText from 'vue-marquee-text-component'

animation+动态计算滚动时长

优点：解决了文字多时滑动速度快的问题

<template>
  <div
    class="nbon-container"
    ref="containerRef"
    :style="duration"
  >
    {{overNumVal}}
  </div>
</template>

<script setup>
  import {ref, watch} from 'vue'
  
  const props = defineProps({
    overNumVal: {
      type: String,
      default: ''
    }
  })
  const transTime = 30
  const containerRef = ref(null)
  
  const duration = ref({
    animationDuration: transTime + 's'
  })
  
  watch(() => props.overNumVal, () => {
    // 通过dom的长度来计算新的滚动时长
    duration.value.animationDuration = (containerRef.value.clientWidth / transTime) + 's'
  }, {
    flush: 'post'
  })
</script>

<style scoped lang="scss">
  .nbon-container{
    // 数据从最右边进入
    padding-left: 720px;
    display: inline-block;
    white-space: nowrap;
    animation: rowLeft linear infinite;
  }
  @keyframes rowLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>