vue.js循环滚动通知列表

<div class="noticeContent">
       <ul class="notice_list" :class="noticeList.length>1?{notice_top:animate}:''">
              <li v-for="(item, index) in noticeList" :key="index">
                {{item.content}}
              </li>
      </ul>
</div>

js代码：

data () {
	return {
		noticeList: [
			{
				content: '苹果也疯狂！iPhone XR来到小米价，刷新售价底线'
			}, {
				content: '“5号电池一出”，充电宝没用了，所有手机通用，行千里不关机'
			}, {
				content: '小米10一出手就高配置，小米9难及十分之一，友商都汗颜'
			}, {
				content: 'iPhone XR2性能曝光，A13处理器+后置双摄'
			}
		],
		animate: false
	}
},
created () {
      // 页面显示
      let t = this
      setInterval(t.showNotice, 3000)
},
showNotice () {
        let t = this
        t.animate = true
        setTimeout(() => {
          t.noticeList.push(t.noticeList[0])
          t.noticeList.shift()
          t.animate = false
        }, 500)
}

css代码

.noticeContent {
    margin-top: 10px;
    display: block;
    position: relative;
    width: 100%;
    height: 25px; // 控制高度以达到控制显示条数的目的
    overflow: hidden;
    border-top:1px solid #ece6ed;
    border-bottom:1px solid #ece6ed;
  }
  .noticeContent li{
    text-align: left;
    line-height: 25px;
    height: 35px;
    font-size: 12px;
    color:red;
  }
  .notice_list {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .notice_top {
    transition: all 0.5s;
    margin-top: -30px;
  }