vue 滚动列表添加动画

<ul>
	<transition-group name="indeName">
	    <li  v-for="item in statusList" :key="item.id">
	        <div  style="margin-right:30px;">
				<span>1000120</span>
	            <div class="textgy" >
	                {{ item.bom_code }}机台{{ item.bom_name }}的{{ item.name}}
	            </div>
	        </div>
	        <div class="timegy">{{ item.endtime.split(' ')[1] }}</div>
	    </li>
	</transition-group>
</ul>

setInterval(() => {
    let xx = {
	        bom_code: '1000120',
	        bom_id: 120,
	        bom_name: ++this.numes + '桌椅',
	        cp_id: 1,
	        endtime: '2022-01-05 20:30:00',
	        id: ++this.numes,
	        name: '电火花',
	        status: 2
	    };
    this.statusList.unshift(xx);
    if (this.statusList.length > 10) {
        this.statusList.splice(this.statusList.length - 1, 1);
    }
}, 1000);

<style lang='scss'>
ul {
     padding: 10px 0;
     li {
         padding: 0 23px;
         height: 34px;
         line-height: 34px;
         display: flex;
         .textgy {
             font-size: 14px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #000000;
         }
         .timegy {
             font-size: 14px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #666666;
         }
     }
 }



	.indeName-enter {
	    opacity: 0;
	    transform: translateY(-25px);
	}
	.indeName-leave-to {
	    opacity: 0;
	}
	.indeName-enter-active
	 {
	    transition: all 0.6s ease;
	}
	.indeName-leave-active{
	    transition: all 0.3s ease;
	}
	.indeName-move {
	    /*下面的 .indeName-move和.indeName-leave-active 配合使用，能够实现列表后续的元素渐渐飘上来的效果*/
	    transition: all 0.6s ease;
	}
	.indeName-leave-active {
	    position: absolute;
	}
</style>