数字变化时的滚动效果（VUE）

需求：数字变化时，让数字有个滚动效果

语言：vue

------------------HTML------------------

<div id="demo">

  <div class="nwwest-roll" id="nwwest-roll">
    <ul id="roll-ul" class="roll-ul">
      <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
        <span class="name">{{item}}</span>
      </li>
  </div>

</div>

------------------CSS----------------------

.nwwest-roll {
  height: 20px;
  overflow: hidden;
}

.roll-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nwwest-roll li {
  height: 35px;
  line-height: 35px;
}

.anim {
  transition: all 1s;
}

-------------------JS--------------------
 

new Vue({
  el: '#demo',
  data: {
    animate:true,
        list:[0,0],
        num:0,
  },

 mounted() {

     let that=this;

  //模拟数字增长(也可以是数据库定时查的或ws中接收的)
     setInterval(function() {
          that.num = ++that.num;
           //数字变化后调用滚动事件
          that.scroll(that.num);
      }, 3000)
  },
  methods: {
       scroll(num){
        let con1 = this.$refs.rollul;
        con1[0].style.marginTop='-30px';
        this.animate=!this.animate;

        var that = this; 
        setTimeout(function(){
            that.list=[num,num]
            con1[0].style.marginTop='0px';
            that.animate=!that.animate;  
        },10)
      }
    }

})

效果浏览：

https://jsfiddle.net/oyai32/qu235wjy/45/