vue 消息滚动通知栏

从下往上跑

1

<div class="news flex-bet">
	<div class="img flex-bet">
		<img class="nioce" src="../assets/images/home03.png" />
		<img class="icon" src="../assets/images/home04.png" />
	</div>
	<div class="news-cot">
		<ul :class="{marquee_top:animate}">
			<li class="h" v-for="(item,index) in news">{{item.name}}</li>
		</ul>
	</div>
</div>

2

export default {
		name: "Home",
		data() {
			return{
				animate: false,
		     	news: [
		     		{
		     			name: '对接口白色的可看出'
	     			},{
		     			name: '就的女会计师你开饭店'
	     			},{
		     			name: '机不可失打开的方式'
	     			},{
		     			name: '接口部分都看见你发靠的就是南方'
	     			},{
		     			name: '开办费离开你浪费'
	     			},{
		     			name: '举报你放假你发个技能奉公守法'
	     			}
		     		
		     	]
			}
		},
		methods: {
			showMarquee: function() {
		      this.animate = true;
		
		      setTimeout(() => {
		        this.news.push(this.news[0]);
		
		        this.news.shift();
		
		        this.animate = false;
		      }, 500);
		    }
		}
}

3

.marquee_top {transition: all 0.5s;margin-top: -45px;}