如果新增数据，盒子的内容从上面往下滚动

<div class="scrollList">
        <div v-for="(item,index) in chainlist" :key="index" >
          <div>{{item.name}}</div>
            <div >{{item.age}}</div>
            <div >{{item.address}}</div>
        </div>
</div>

      .scrollList{
        height: 820px;
        position: absolute;
        top: 0px;
  	    overflow: hidden;
      }

  data() {
    return {
      ii: 1,
      chainlist: [],
    };
  },
  		//这是轮询函数，result取出来上次接口返回的数据
         var result = JSON.parse(localStorage.getItem("newList"));
 		//判断上次的id和这次的id为否一样，如果不一样则是新增了数据
          if (
            result
              ? result[0]
                ? result[0].id!= res.data.data[0].id
                : false
              : false
          ) {
          //如果新增数据，就把该条数据添加到数据的最前面
            result.unshift(res.data.data[0]);
            this.chainlist = result;
            //i的作用是保证每次手动写入的样式表不一样
            this.ii++;
            //获取html中第1个样式表中的第一条规则
            var style = document.styleSheets[0]; 

			//写入动画样式和规则
            $(".scrollList").css({
              "animation-duration": "3s", 
              "animation-name": "bomb" + this.ii,
            });
            //最终的结果的样式还是之前写的样式，一开始的位置和高度变化即可。因为多了一个数据。
            style.insertRule(
              "@keyframes bomb" +
                this.ii +
                "{0%{ top:-150px;height:970px} 100% {top:0px;height:820px }}",
              this.ii
            );
          }
          //存储接口返回的最新数据到newList中
          localStorage.setItem("newList", JSON.stringify(res.data.data));