双层数组异步处理

需求为data数据中，多个数组，数组中的项对应一个盒子，盒子需要有逐个开启的动画。如下例子为 Vue3

const itemArr = Array(15).fill(1)
const itemArr2 = Array(10).fill(2)
const dataArr = [
  {
    title: 'Cointiger World Cup 2002',
    boxs: itemArr,
  },
  {
    title: 'Cointiger Two',
    boxs: itemArr2,
  },
]
const openBoxState = reactive({
  // 已开启盲盒数量
  openedNums: Array(dataArr.length).fill(1),
  // 当前开启的盲盒系列的 index
  currentOpenIdx: 0,
})

const openBox = function (idx) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      openBoxState.openedNums[idx]++
      resolve()
    }, 300)
  })
}
const eachFn = async function (arr) {
  for (let i = 0; i < arr.length; i++) {
    openBoxState.currentOpenIdx = i
    openBoxState.openedNums[i] = 0
    for (let j = 0; j < arr[i].boxs.length; j++) {
      await openBox(i)
    }
  }
}

eachFn(dataArr)

<div class="blind-box-list" v-for="(item, index) in dataArr" :key="index">
        <h2 class="blind-box-list-title white">{{ item.title }}</h2>
        <div class="blind-box-item-wrap">
          <div class="blind-box-list-item" v-for="(child, idx) in item.boxs" :key="idx">
            <div class="item-cont">
              <div
                class="item-cont-animate"
                :class="{
                  'flip-vertical-bck': openedNums[index] >= idx && currentOpenIdx >= index,
                }"
              >
                <div
                  class="round"
                  :class="{ 'fade-big-small': openedNums[index] >= idx && currentOpenIdx >= index }"
                ></div>
                <el-image
                  class="item-cont-img front"
                  src="/src/assets/image/blind-box/detail/temporary/no-open-box.png"
                ></el-image>
                <el-image
                  class="item-cont-img bank"
                  src="/src/assets/image/blind-box/detail/temporary/types1.png"
                ></el-image>
              </div>
              <div class="item-cont-title white">box title</div>
              <span class="item-cont-num">1234-{{ idx }}</span>
            </div>
          </div>
        </div>
      </div>

.flip-vertical-bck {
    animation: flip-vertical-bck 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  }
  .fade-big-small {
    animation: fade-big-small 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2022-8-29 15:54:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
   * ----------------------------------------
   * animation flip-vertical-bck
   * ----------------------------------------
   */
  @keyframes flip-vertical-bck {
    0% {
      -webkit-transform: translateZ(0) rotateY(0);
      transform: translateZ(0) rotateY(0) scale(1.5);
    }
    100% {
      -webkit-transform: translateZ(-260px) rotateY(-180deg);
      transform: translateZ(-260px) rotateY(-180deg) scale(1);
    }
  }