VUEの実現の枠組みの下で、テキストの回転ドア

htmlの一部： 

      < divのクラス= "ランタンテキスト" REF = "lanternTextBox" > 
        < p個のクラス= "テキストテキスト・フロント" REF = "lanternTextFornt" > </ P > 
        < Pのクラス= "テキストテキストの背後にある" REF = "lanternTextBehind" > </ P > 
      </ DIV >

スタイルセクション：

　　.lanternテキスト{ 
        オーバーフロー：隠されました。
        幅：80％; 
        色：＃5b6f8f。
        余白左：40ピクセル; 
        位置：相対; 
        高さ：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（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 = '翻訳（$ {lanternBoxWidth} PX） `。
        lanternTextFornt.addEventListener（ 'animationend'、関数（）{ 
          lanternTextFornt.style.display = 'なし'; 
        }）
      }