VUE의 실현의 프레임 워크에서 텍스트 회전문

HTML 부분 : 

      < DIV 클래스 = "랜턴 텍스트" REF = "lanternTextBox" > 
        < P는 클래스 = "텍스트 텍스트 앞" REF = "lanternTextFornt" > </ P > 
        < P는 클래스 = "텍스트 텍스트 뒤에" REF = "lanternTextBehind" > </ P > 
      </ DIV >

스타일 섹션 :

　　.lantern 텍스트 { 
        오버 플로우 : 숨겨진; 
        폭 : 80 %; 
        색상 : # 5b6f8f; 
        여백 왼쪽 : 40px; 
        위치 : 상대; 
        신장 : 100 %; 
      }    

      는 .text { 
        공백 : 파라미터 nowrap; 
        위치 : 절대; 
        폭 : 자동; 
      } 

      는 .text 앞 { 
        애니메이션 : textFront 선형; 
      } 

      는 .text 숨김 { 
        애니메이션 : textBehind 선형 무한; 
        (300 픽셀)을 번역; 변환 
      }

JS 부 :

　　　 . CONST {lanternTextFornt, lanternTextBehind는이 lanternTextBox} = $ 심판, 
      CONST = {데이터 텍스트 : '요청 윤곽 내용 .....'}; 
      IF (데이터 && data.text) { 
        lanternTextFornt.innerHTML = data.text ; 
        lanternTextBehind.innerHTML = data.text; 
        CONST = lanternBoxWidth lanternTextBox.offsetWidth; 
　　　　　// 이동 시간을 계산하기 전에 
        CONST timeFornt = Math.round (/ 25을 lanternTextFornt.offsetWidth ) 
　　　　　// 이동 시간 산출 후 
        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 =`번역 ($ {lanternBoxWidth} PX)`; 
        lanternTextFornt.addEventListener ( 'animationend'함수 () { 
          lanternTextFornt.style.display = '없음'; 
        }) 
      }