vue实现通知消息上下滚动效果

vue实现通知消息上下滚动效果

1，html

<!--  通知消息滚动模板    -->
      <div class="box">
        <ul class="con1" ref="con1" :class="{anim:animate==true}">
          <li v-for='item in messageList'><img style="height: 0.267rem" :src='require("assets/img/self/hd.png")' >{{item.infoContent.substring(0,20)+'...'}}<span style="color: #999999;font-size: 0.053rem;float: right;margin-right: 0.18rem">{{item.createTime | dateYMD }}</span></li>
        </ul>
      </div>

2，CSS

.box{
    width: 98%;
    height: 64px;
    overflow: hidden;
    margin-left: 1.5%;
    margin-top: 0.533rem;
    background: #f9f9f9;
    border-radius: 0.213rem;
  }
  .anim{
    transition: all 0.5s; 
    margin-top: -30px;
  }
  .con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
    font-size: 0.053rem;
  }

3，JS

created() {
    // 定时触发滚动函数
    setInterval(this.messagescroll,2000)
  },

methods:{
//通知消息滚动函数
    messagescroll(){
      this.animate=true;    // 开启过渡动画
      setTimeout(()=>{
        this.messageList.push(this.messageList[0]);  // 将数组的第一个元素追加到数组最后面
        this.messageList.shift();               //然后删除数组的第一个元素
        this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      },3500)
    },
    }

 data() {
    return {
      animate:false, //控制过渡动画是否开启
      messageList:[],//通知消息列表
     }
   }

4，实现效果