vue中css盒子逐一浮现

今天给大家带来了一个项目实现效果： 获得的奖励动画按获取顺序逐个显示 话不多说，上代码：

<template>
    <div class="main">
        <div class="gift_box">
        //给每一个加上延时展示
            <div class="gift_list" v-for="(item,index) in 10" :key="index" :style="{'animation-delay': `${index+1}s`} ">
                <div class="gift" >{{ index }}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" >
.main{
    width: 6rem;
    height: 6rem;
    background: #f0f0f0;
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: scroll;
    .gift_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        flex-wrap: wrap;
        .gift_list{
            width: 2rem;
            height: 2rem;
            background: rgb(246, 192, 198);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.5rem auto;
            border: 0.01rem solid #ffff;
            //forwards保留动画最后一帧展示
            animation: fadeInUp 1s 1 forwards;
            opacity: 0;
            .gift{
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
            }
        }
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
</style>