テキストアナウンスカルーセル効果を実現

<テンプレート> 
  <DIV CLASS = "announcementList"> 
    <EL-行：樋= "20"> 
      <EL-COL：スパン= "6"クラス= "lable"> 
        <EL-タグタイプ= "危険性" SIZE =」小"効果="暗い">公告</ ELタグ> 
      </ EL-COL> 
      <EL-COL：スパン=" 12" V-IF = "1 == 0"> 
        <DIV CLASS = "displayContent">暂无公告</ div> 
      </ EL-COL> 
      <EL-COL：スパン= "6"> 
          <DIV CLASS = "てtextBox"> 
            <遷移名= "スライド"> 
              <Pクラス= "テキスト"：キー= "text.id"> {{text.val}} </ P> 
            </遷移> 
          </ div> 

      </ EL-COL> 
    </ EL-行> 
  </ div> 
</テンプレート> 

<スクリプト> 
  からインポートbaseModule '../baseModule'

  デフォルト{エクスポート
    名： "announcementList"、
    計算：{ 
      テキスト（）{ 
        リターン{ 
          ID：this.number、
          ヴァル：this.textArr [this.number] 
        } 
      } 
    }、（）{
    マウント
      this.startMove（）
    }、
    メソッド：{ 
      startMove（）{ 
        //無効eslintライン-次へ- 
        せたsetTimeoutタイマ=（（）=> { 
          IF（this.number === 2）{ 
            this.number = 0; 
          }そうでなければ{ 
            this.number + = 1; 
          } 
          this.startMove（）; 
        }、2000）; //スクロールアニメーション期間に2000を一時停止する必要はありません
      }

    }、
    データ（）{ 
      リターン{ 
        textArr：[ 
          '最初の発表1'、
          '2第ショールーム第発表'、
          3 '第ショールーム第ショールーム第掲示' 
        ]、
        番号： 0 
      } 
    } 

  } 
</ SCRIPT> 

<スタイルは、スコープのlang = "少ない"> 
  .announcementList { 
    マージン：0; 
    パディング：0; 
    フォントサイズ：14px; 

    .lable { 
      マージン：5pxの0PX 7px 10pxの; 
    } 

    .displayContent { 
      カラー＃9f9f9f; 
      =左テキスト整列：センター; 
    } 

    .textBox { 
      幅：100％; 
      高さ：35px; 
      マージン：オート0。
      マージントップ：3px; 
      オーバーフロー：隠されました; 
      位置：相対; 
      テキスト整列：センター; 
    } 

    の.text { 
      幅：100％。
      位置：絶対; 
      下：0; 
    } 

    .slide入力して活性、.slide脱退活性{ 
      遷移：全て0.5秒線形。
    } 
    .slide入る{ 
      変換：移動Y（20ピクセル）スケール（1）。
      不透明度：1; 
    } 
    .slide-残す-に{ 
      変換：移動Y（-20px）スケール（0.8）。
      不透明度：0; 
    } 
  } 
</スタイル>