vue实现文字列表由下往上滚动

先看下实现之后的效果：

说下实现思路依旧是利用setInterval和setTimeout两个方法结合操作数据列表：先用push把第一个元素追加到末尾，再用shift删除掉第一个元素。可以理解为第一个做完事情又赶快跑到最后位置继续排队……

如果把高度调高，就能更明显看到追加的过程，理解这个思路：

完整页面代码：

<template>
    <div class="marquee-wrap">
        <ul class="marquee-list" :class ="{'animate-up':animateUp}">
            <li v-for="item in list">{{item.text}}
            </li>
        </ul>
    </div>
</template>
<script>
  export default {
    name: 'RealTimeEnv',
    data(){
      return{
        animateUp:false,
        list: [{
          "text": "停车场北出口抬杆故障",
          "location": "24层A3",
          "type": "故障",
          "time": "2020-07-08 18:27:24"
        },
          {
            "text": "*大堂西侧摄像头离线",
            "location": "24层A3",
            "type": "离线",
            "time": "2020-07-08 18:27:23"
          },
          {
            "text": "*一层新风机启动异常",
            "location": "24层A3",
            "type": "报警",
            "time": "2020-07-08 18:27:24"
          }
        ],
      }
    },
    mounted(){
      setInterval(this.scrollAnimate,4000);
    },
    methods: {
      scrollAnimate() {
        this.animateUp = true;
        setTimeout(()=>{
          this.list.push(this.list[0]);
          this.list.shift();
          this.animateUp = false;

        },500);
      },
    },
  }
</script>
<style scoped>
    .marquee-wrap {
        height: 40px;
        width: 463px;
        border-radius: 20px;
        background-color: #0E171F;
        margin: 0 auto;
        overflow: hidden;

    }
    .marquee-list li{
       text-overflow: ellipsis;
        width: 100%;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 20px;
        list-style: none;
        line-height: 40px;
        text-align: center;
        color: #e5f2fe;
        font-size: 18px;
        font-weight: 400;
    }
    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-40px);
    }

</style>

待处理疑问：

为什么同样的写法在一个小技巧让icon跳动起来就不产生效果了呢？