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

转载于:https://www.cnblogs.com/lizhao123/p/11384686.html