如何实现数字滚动的效果？

<template>  
<view class="content">  
<number content="666" style="height: 20px; border: 1px solid red;"></number>  
</view>  
</template>  

<script>  
  import number from './number.vue'  
export default {  
    components: {  
      number  
    },  
data() {  
return {  
}  
},  
methods: {  

}  
}  
</script>  

<style>  
.content {  
display: flex;  
flex-direction: column;  
}  
</style>  

组件代码  
<template>  
  <view class="c-flip-number-container">  
    <block v-for="(item,index) in digits">  
      <view v-if="item !== '.'" class="digits-col"  
        :style="{transform: 'translateY(-' + (item * 100) + '%', transition: 'transform ' + duration + 's'}">  
        <view class="digit-number" v-for="(item, sIndex) in 10">  
          {{sIndex}}  
        </view>  
      </view>  
      <view v-else>{{item}}</view>  
    </block>  
  </view>  
</template>  

<script>  
  export default {  
    name: 'number',  
    props: {  
      content: {  
        type: String,  
        default: ''  
      },  
      duration: {  
        type: Number,  
        default: 1  
      }  
    },  
    watch: {  
      content(val) {  
        this.parseContent()  
      }  
    },  
    data() {  
      return {  
        digits: []  
      }  
    },  
    created() {  
      this.parseContent()  
    },  
    methods: {  
      parseContent() {  
        const content = this.content;  
        if (Number.isNaN(+content)) {  
          this.digits = [];  
          return;  
        }  

        // 将数字分离成单个 digit，用于生成数字阵列  
        const digits = ('' + content).split('');  
        const initDigits = digits.map(d => d === '.' ? d : '0');  

        this.digits = initDigits;  

        // 将各数字位初始化为 0，再赋值，获得滚动效果  
        setTimeout(() => {  
          this.digits = digits;  
        }, 100);  
      }  
    }  
  }  
</script>  

<style>  
  .c-flip-number-container {  
    display: flex;  
    flex-direction: row;  
    overflow: hidden;  
    grid-gap: 10px;  
  }  

  .digits-col {  
    display: flex;  
    flex-direction: column;  
    align-items: flex-end;  
  }  

  .digit-number {  
    height: 20px;  
  }  
</style>