Текст вращающаяся дверь в рамках реализации вю

HTML часть: 

      < DIV класс = "фонарь-текст" исх = "lanternTextBox" > 
        < р класс = "текстовая фронт" исх = "lanternTextFornt" > </ р > 
        < р класс = "текстовая за" исх = "lanternTextBehind" > </ р > 
      </ DIV >

раздел стиль:

　　.lantern-текст { 
        переполнения: скрытый; 
        ширина: 80%; 
        цвет: # 5b6f8f; 
        Левое поле: 40px; 
        позиция: относительная; 
        высота: 100%; 
      }    

      .Text { 
        бело-пространство: Nowrap; 
        позиция: абсолютная; 
        ширина: авто; 
      } 

      .Text-фронта { 
        анимация: textFront линейный; 
      } 

      .Text-за { 
        анимации: textBehind линейной бесконечно; 
        преобразования: перевод (300px); 
      }

JS часть:

　　　 . Сопз {lanternTextFornt, lanternTextBehind, то это lanternTextBox} = $ рефов; 
      {текст данных: 'содержание запроса шатровым .....'} Const =; 
      IF (Data && data.text) { 
        lanternTextFornt.innerHTML = data.text ; 
        lanternTextBehind.innerHTML = data.text; 
        Const = lanternBoxWidth lanternTextBox.offsetWidth; 
　　　　　// до вычисления времени движения 
        сопзИте timeFornt = Math.round (lanternTextFornt.offsetWidth / 25 ); 
　　　　　// после расчета времени движения 
        сопзИте 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 = `перевести ($ {lanternBoxWidth} точек)`; 
        lanternTextFornt.addEventListener ( 'animationend', функция () { 
          lanternTextFornt.style.display = 'ни'; 
        }) 
      }