vue新闻滚动条（上下滚动 可停顿）

使用 transition

.tongzhi{
	color: #2d8cf0;
	min-width: 460px;
	height: 30px;
	overflow: hidden;
}
.tongzhi .slide{
	position: relative;
}
.tongzhi .slide .text{ 
	cursor: pointer; 
	height: 0;
}
.marquee_top {
	transition: all 0.5s;
	margin-top: -30px
}
.marquee_list {
	display: block;
	position: absolute;
	top: -30px;
	left: 55px;
	cursor: pointer;
}

<div class="tongzhi">
	<span>通知 <Icon type="md-megaphone" />：</span>
	<div class="slide">
		<div class="marquee_list" :class="{ 'marquee_top': animate }">
			<p v-for="item in textArr" :key="item.id">{{item.title}}</p>
		</div>
	</div>
</div>

data (){
	return{
	animate: false
	}
},
created () {
	setInterval(() => {
		this.startMove()
	}, 2000)
},
methods: {
	startMove () {
      this.animate = true
      setTimeout(() => {
        this.textArr.push(this.textArr[0])
        this.textArr.shift()
        this.animate = false
      }, 500) // 时间和动画时间保持一致
    },
}