vue框架下实现文字走马灯

html部分：

      <div class="lantern-text" ref="lanternTextBox">
        <p class="text text-front" ref="lanternTextFornt"></p>
        <p class="text text-behind" ref="lanternTextBehind"></p>
      </div>

style部分：

　　.lantern-text {
        overflow: hidden;
        width: 80%;
        color: #5b6f8f;
        margin-left: 40px;
        position: relative;
        height: 100%;
      }   

      .text {
        white-space: nowrap;
        position: absolute;
        width: auto;
      }

      .text-front {
        animation: textFront linear;
      }

      .text-behind {
        animation: textBehind linear infinite;
        transform: translate(300px);
      }

JS部分：

　　　 const { lanternTextFornt, lanternTextBehind, lanternTextBox } = this.$refs;
      const data = {text:‘请求的跑马灯内容.....‘};
      if(data && data.text) {
        lanternTextFornt.innerHTML = data.text;
        lanternTextBehind.innerHTML = data.text;
        const lanternBoxWidth = lanternTextBox.offsetWidth;　　　　　// 计算前一个运动时间
        const timeFornt = Math.round(lanternTextFornt.offsetWidth / 25);　　　　　// 计算后一个运动时间
        const timeBehind = Math.round((lanternTextFornt.offsetWidth + lanternBoxWidth) / 25);
        lanternTextFornt.style.animationDuration = `${timeFornt}s`;
        lanternTextBehind.style.animationDuration = `${timeBehind}s`;　　　　　// 后面一个动画延时时间
        lanternTextBehind.style.animationDelay = `${timeFornt}s`;　　　　  // 确保恒定速率　
        lanternTextBehind.style.transform = `translate(${lanternBoxWidth}px)`;
        lanternTextFornt.addEventListener(‘animationend‘, function() {
          lanternTextFornt.style.display = ‘none‘;
        })
      }

原文地址：https://www.cnblogs.com/chelse/p/11431031.html