<!-- 滚动公告 -->

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