Text revolving door under the framework of realization of vue

html part: 

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

style section:

　　.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 part:

　　　 . const {lanternTextFornt, lanternTextBehind, the this lanternTextBox} = $ refs; 
      const = {Data text: 'Request marquee content .....'}; 
      IF (Data && data.text) { 
        lanternTextFornt.innerHTML = data.text ; 
        lanternTextBehind.innerHTML = data.text; 
        const = lanternBoxWidth lanternTextBox.offsetWidth; 
　　　　　// before calculating a movement time 
        const timeFornt = Math.round (lanternTextFornt.offsetWidth / 25 ); 
　　　　　// after calculating a movement time 
        const timeBehind = Math.round ((+ lanternTextFornt.offsetWidth lanternBoxWidth) / 25); 
        lanternTextFornt.style.animationDuration timeFornt} = {$ `s`; 
        lanternTextBehind.style.animationDuration timeBehind} = {$` s`;
　　　　　// delay time behind an animation
        lanternTextBehind.style.animationDelay = `${timeFornt}s`;
　　　　  // 确保恒定速率　
        lanternTextBehind.style.transform = `translate(${lanternBoxWidth}px)`;
        lanternTextFornt.addEventListener('animationend', function() {
          lanternTextFornt.style.display = 'none';
        })
      }