者：Lydia Hallie

譯者：xuying 全棧修煉

原文鏈接：https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

轉發鏈接：https://mp.weixin.qq.com/s/AthCvtiTnPETkAnzyOLN1A

<template>
    <div class="number">
        <ul id="dataNums">
            <li v-for="(item,index) in list" :key="index">
                <div class="dataBoc">
                    <div class="tt"
                        :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
                        <span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>

                    </div>

                </div>

            </li>

        </ul>

    </div>

</template>

s部分

export default {
        props:{
        	number:Number
        },
        data(){
            return{
                list:[],
                numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.']
            }
        },
        mounted(){
            this.scroll();
        },
        methods:{
            scroll(){
                this.list=this.number.toString().split('');
                let arr=[];
                this.list.forEach((value) => {
                    arr.push({
                        num:value,
                        top:0
                    })
                });
                this.list=arr;
                let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height);
                this.list.forEach((value,index) => {
                    setTimeout(()=>{
                        value.top=parseFloat((value.num*Hei)+(Hei*10));
                    },index*300);
                });
            }
        }
    }

css樣式

者： 徐小夕

轉發鏈接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg