实现文字滚动效果——Vue实现

这种思路要借用到Vue提供的transition组件了，它提供了一些类名，比如v-enter、v-enter-active等来对应CSS的类

  
    
{{newsText.val}}
  

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);
}