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>