vue 滾動公告

<!-- 滾動公告 -->
<div class="textArr">
	<p class="slice-enter-active" :style="    {color:text.color}" :key="text.id">    
        {{text.value}}</p>
</div>

　　

data() {
			return {
				scroll: { //滾動公告
					number: 0,
					textArr: [{
						value:'1.地圖中玫瑰紅圖標表示用戶當前選擇的印章',
						color:'#D4237A',
					},{
						value:'2.地圖中綠色圖標表示印章在線狀態',
						color:'#67C23A',
					},{
						value:'3.地圖中紅色圖標表示印章離線狀態',
						color:'red',
					},{
						value:'4.如果選擇印章無定位信息，地圖將顯示空白',
						color:'red',
					}]
				}

			};
		},



computed: {
	text() {
		return {
			id: this.scroll.number,
			value: this.scroll.textArr[this.scroll.number].value,
			color:this.scroll.textArr[this.scroll.number].color,
		}
	}
},
mounted() {
	//滾動公告
	this.startMove()
},

methods: {
			//滾動公告
			startMove() {
				// eslint-disable-next-line
				let timer = setInterval(() => {
					if (this.scroll.number === this.scroll.textArr.length-1) {
						this.scroll.number = 0;
					} else {
						this.scroll.number += 1;
					}
				}, 5000); // 滾動不需要停頓則將2000改成動畫持續時間
			},
}	    

　　

.textArr{//滾動公告
position: absolute;right: 220px;z-index: 11;width:400px;height: 40px;line-height: 40px;overflow: hidden;text-align:center;
.slice-enter-active {
animation: bounce-in 5s infinite;
}

}

@keyframes bounce-in {
0% {
transform:translateY(30px) ;
}
20% {
transform: translateY(0px);
}
80% {
transform: translateY(0px);
}
100% {
transform:translateY(-30px);
}
}