通知メッセージカルーセルを実装するための CSS3 トランジション

<テンプレート>
  <!-- カルーセルビュー-->
  <div id="カルーセルビュー">
    <!-- カルーセル リスト -->
    <ul id="カルーセルリストビュー" :class="{ 'カルーセルアニメーション':isAnimated }">
      <li v-for="(item, index) in dataSource" :key="index">{{ item }}</li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      // アニメーションを開始 isAnimated: false,
      // カルーセルデータ dataSource: ['dzm', 'xyq', '啊啊']
    }
  },
  作成された（）{
    // タイマーを開始します setInterval(this.scroll, 1000)
  },
  メソッド: {
    // スクロールアニメーション scroll () {
      // アニメーションを開始 this.isAnimated = true
      // カウントダウンアニメーション時間 setTimeout(() => {
        // 配列の最初の要素を配列の末尾に追加します this.dataSource.push(this.dataSource[0])
        // 配列の最初の要素を削除します this.dataSource.shift()
        // アニメーションをオフにする this.isAnimated = false
        // アニメーション時間は .carousel-animated で設定された時間と一致する必要があります}, 500)
    }
  }
}
</スクリプト>

<スタイルスコープ>
#カルーセルビュー {
  幅: 100%;
  高さ: 32px;
  背景色: 赤;
  オーバーフロー: 非表示;
}
#カルーセルリストビュー {
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
}
#カルーセルリストビュー li {
  行の高さ: 32px;
  高さ: 32px;
}
.carousel-animated {
  遷移: 0.5 秒を変換します。
  変換: translateY(-32px);
}
</スタイル>