實現文字滾動效果——Vue實現

這種思路要借用到Vue提供的transition組件了，它提供了一些類名，比如v-enter、v-enter-active等來對應CSS的類

<div class="text-container">
  <transition class="inner-container" name="slide" mode="out-in">
    <p class="text2" :key="newsText.id">{{newsText.val}}</p>
  </transition>
</div>

data數據

news: [
        { id: "1", value: "你好啊的的" },
        { id: "2", value: "我是可以滾動的文本啊" },
        { id: "3", value: "大家大家都" }
      ],
number: 0,

計算屬性

computed: {
  newsText() {
    return {
      id: this.number,
      val: this.news[this.number].value
    }
  }
},

再建立一個定時器，在定時器中不斷改變計算屬性對應的值：

   startMove() {
      this.number = 0;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.number < this.unreadNewsArr.length - 1) {
          this.number += 1;
        } else {
          this.number = 0;
        }
      }, 5000);
    },

同時在CSS部分添加對應的類：

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s linear;
}
.slide-leave-to {
  transform: translateY(-60px);
}
.slide-enter {
  transform: translateY(60px);
}