vue中实现文字向上滚动效果

<template>
    <div class="djs-box">
        <div class="topBox">
            <h3>vue实现文字向上滚动效果</h3>
            <div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
        </div>
        <div class="dajianshi">
              <li v-for="item in list" ref="rollul" :class="{anim:animate==true}"> 
                   {{item.vname}} - {{item.vtime}} - {{item.pvname}} 
             </li> 
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                time:[],
                  animate: true, 
                  list: [ 
                    { "vname": "大剑师1", "pvname": "PIC-----1", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师2", "pvname": "PIC-----2", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师3", "pvname": "PIC-----3", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师4", "pvname": "PIC-----4", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师5", "pvname": "PIC-----5", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师6", "pvname": "PIC-----6", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师7", "pvname": "PIC-----7", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师8", "pvname": "PIC-----8", "vtime": "2024.05.12 11:12:23" }, 
                    { "vname": "大剑师9", "pvname": "PIC-----9", "vtime": "2024.05.12 11:12:23" }, 
                  ] 
            }
        },
        mounted() {
           const timer = setInterval(this.goscroll,1000);
           // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。  
             this.$once('hook:beforeDestroy', () => {     
             clearInterval(timer);})
        },
        methods: {
          goscroll() { 
            let con1 = this.$refs.rollul; 
            con1[0].style.marginTop = '30px'; 
            this.animate = !this.animate; 
            var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向 
            setTimeout(function() { 
              that.list.push(that.list[0]); 
              that.list.shift(); 
              con1[0].style.marginTop = '0px'; 
              that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了 
            }, 0) 
          } 
        } 

    }
</script>
<style scoped>
    .djs-box {
        width: 1000px;
        height: 650px;
        margin: 50px auto;
        border: 1px solid black;
    }

    .topBox {
        margin: 0 auto 0px;
        padding: 10px 0 20px;
        background: black;
        color: #fff;
    }

    .dajianshi {
        width: 98%;
        margin: 0 auto;
        height: 520px;
        padding-top:150px;
        background-color: cde;
        position: relative;
    }

    .dajianshi li {height: 30px; line-height: 30px; font-size: 20px; list-style: none; } 
    .anim {transition: all 0.5s; } 
</style>