vue跑马灯效果

功能：根本文字时长设置滚动时长，鼠标移上去停止滚动，把鼠标移开继续滚动

我这个是滚动2遍则隐藏，如果需要一直滚动的，把定时关掉就了。

<template>
  <div id="app">
    <div class="marquee">
      <div class="text" :class="{ 'animate-once': animateOnce }" :style="{ animationDuration: animationDuration + 's' }">
        这是跑马灯文字，滚动两遍后消失。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animateOnce: false,
      animationDuration: 30 // 默认动画持续时间
    };
  },
  mounted() {
    // 动态计算动画持续时间
    const textLength = this.$el.querySelector('.text').textContent.length;
    this.animationDuration = Math.max(10, textLength * 0.5); // 根据文字长度调整动画时间，最短10秒

    // 使用setTimeout模拟动画执行完毕后的操作
    setTimeout(() => {
      this.animateOnce = true;
      // 延迟2次动画时长后移除动画类名，文字消失
      setTimeout(() => {
        this.animateOnce = false;
      }, 2 * this.animationDuration * 1000); // 动态调整延迟时间
    }, 1000); // 1000ms是给文字一点时间进行第一次滚动
  }
};
</script>

<style>
.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.text {
  display: inline-block;
  padding-left: 100%; //文字右移的距离，可根据自己的调节
  animation: scroll-once linear infinite;
}

.animate-once .text {
  animation: scroll-once linear 2;
}

@keyframes scroll-once {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}
</style>