公告栏上下滚动特效

话不多说，直接上代码

style样式

<style>
    .list{
      list-style: none;
      width: 100%;
      text-align: center;
      overflow: hidden;
      height:40px;
      padding: 0;
      margin: 0
    }
    li{
      height:40px;
      line-height: 40px;
    }
    .toUp{
      margin-top: -40px;
      transition: all 0.5s;
    }
  </style>

html代码

    <div id="demo"> 
      <ul class="list">
        <li v-for="(item,index) in ulList" :class="!index&&play ? 'toUp' : '' ">{{item.msg}}</li>
      </ul>
    </div>

JS代码

new  Vue({
      el:'#demo',
      data:{
        ulList:[
          {msg:'这是第一条信息'},
          {msg:'这是第二条信息'},
          {msg:'这是第三条信息'},
          {msg:'这是第四条信息'},
          {msg:'这是第五条信息'},
          {msg:'这是第六条信息'},
          {msg:'这是第七条信息'},
          {msg:'这是第八条信息'},
          {msg:'这是第九条信息'},
          {msg:'这是第十条信息'},
        ],
        play:false
      },
      mounted(){
        setInterval(this.startPlay,2000)
      },
      methods:{
        startPlay(){
          let that=this;
          that.play=true;//开始播放
          setTimeout(()=>{
            that.ulList.push(that.ulList[0]);//将第一条数据塞到最后一个
            that.ulList.shift();//删除第一条数据
            that.play=false;//暂停播放
          },500)
        }
      }

    })