CSS3 过渡实现无缝滚动效果

 //html
.scrollBox(ref="scroll" :class="{animate:animate}" @mouseenter="iEnter" @mouseleave="iLeave")
  .left(style="cursor:pointer;" @click="pathJump('notices')" v-for="item in release_notice" :key="item.notice_id")
    i.iconfont.icon-gonggao5(style="font-size: 18px;")
    .notice(style="font-size: 14px;")
      .text {
    
    {
    
     item.title }}
      .date {
    
    {
    
     item.date }}

mounted() {
    
    
  this.timer = setInterval(this.scroll, 2000)
}

data() {
    
    
	return {
    
    
		animate: false,
	    timer: null,
	    scrollLen: 1,
	    release_notice: [{
    
    title: '123', date: '2021-11-01'},{
    
    title: '456', date: '2021-11-02'}]
    }
}

methods: {
    
    
  scroll(){
    
    
    if(!this.release_notice.length || this.release_notice.length < 2){
    
    
      clearInterval(this.timer)
      return false
    }
    let scroll = this.$refs.scroll;
    // let height = document.querySelector('.scrollBox').childNodes[0].childNodes[0].clientHeight
    scroll.style.marginTop = -this.scrollLen * 40 +'px'; //滚动的整体高度
    this.animate=!this.animate;
    let _this = this
    let timer = setTimeout(()=>{
    
    
      let arr = _this.release_notice.slice(0, _this.scrollLen)
      for(let i=0;i<_this.scrollLen;i++){
    
    
        _this.release_notice.push(arr[i]);
      }
      _this.release_notice.splice(0, _this.scrollLen);
      _this.animate=!_this.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      scroll.style.marginTop='0px';
      clearTimeout(timer)
    },500)
  },
  iEnter(){
    
    
    clearInterval(this.timer)
  },
  iLeave(){
    
    
    this.timer = setInterval(this.scroll, 2000)
  }
},

<style scoped lang="scss">
	.scrollBox {
    
    
      &.animate{
    
    
        transition: all .5s ease 0s;
      }
    }
</style>