|
这种思路要借用到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);
}
| 
转播
