vue 文字无缝滚动 步进滚动 鼠标移入停止滚动

效果图：

 html：

<template>
  <div>
    <div class="text-container">
      <transition class="inner-container2"
                  name="slide"
                  mode="out-in">
		<div :key="text.id" @mouseenter="Stop()" @mouseleave="Up()">
			<p class="information" v-if="text.val" :title="text.val.host_name+'/'+text.val.area">IP:{{text.val.host_name}}/{{text.val.area}}</p>
			<p class="informationText" v-if="text.val" :title="text.val.problem">{{text.val.problem}}</p>
		</div>
      </transition>
    </div>
  </div>
</template>

js：

export default {
    props: ['arr'],
	data () {
		return {
		number: 0,
		timer:undefined,
		//  滚动时间
		totalDuration:2000
		}
	},
	computed: {
		text (e) {
		return {
			id: this.number,
			val: this.arr[this.number]
			}
		}
	},
	mounted () {
		this.startMove()
	},
	methods: {
		startMove () {
		this.timer = setTimeout(() => {
			if (this.number === this.arr.length-1) {
			this.number = 0;
			} else {
			this.number += 1;
			}
			this.startMove();
		}, this.totalDuration)
		},
		Stop(){
			clearInterval(this.timer)
		},
		Up(){
			this.startMove()
		}
	}
}

css：

	h2 {
		margin:20px 0;
	}
	.text-container {
		text-align:center;
		width:25rem;
		height:2.5rem;
		line-height:30px;
		margin:10px auto;
		overflow:hidden;
	}
	.text,.text2 {
		margin:0;
	}
	.inner-container {
		animation:myMove 5s linear infinite;
		animation-fill-mode:forwards;
	}
	/*文字无缝滚动*/
	@keyframes myMove {
		0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-150px);
	}
	}/*文字停顿滚动*/
	@keyframes myMove2 {
		0% {
		transform:translateY(0);
	}
	10% {
		transform:translateY(-30px);
	}
	20% {
		transform:translateY(-30px);
	}
	30% {
		transform:translateY(-60px);
	}
	40% {
		transform:translateY(-60px);
	}
	50% {
		transform:translateY(-90px);
	}
	60% {
		transform:translateY(-90px);
	}
	70% {
		transform:translateY(-120px);
	}
	80% {
		transform:translateY(-120px);
	}
	90% {
		transform:translateY(-150px);
	}
	100% {
		transform:translateY(-150px);
	}
	}.slide-enter-active,.slide-leave-active {
		transition:all 0.5s linear;
	}
	.slide-leave-to {
		transform:translateY(-20px);
	}
	.slide-enter {
		transform:translateY(20px);
	}
	.information {
		width:100%;
		font-size:1.1rem !important;
		font-weight:600;
		color:#ffb956 !important;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.informationText {
		font-size:0.8rem !important;
		font-weight:600;
		color:#fff;
	}