vue的transition-group 下面每个元素能不能先后执行动画呢

Question

 <transition-group appear name="list" v-on:after-enter="showpage">
        <div v-for="(data,index) in datas" :key="data.ID" class="list-container">
          <div class="list-wrapper">
            <p class="list-title">{{data.title}}</p>
            <p class="list-description">{{data.description}}……</p>
            <p class="points">……</p>
            <div class="list-meta">
              <span class="el-icon-date" style="color: #BDE4F4"></span>
              <time class="list-time">{{data.time}}</time>

              <span class="list-category"><span class="icon-price-tag" style="font-size: 15px;margin: 0 6px;color: #BA68C8"></span>{{data.category}}</span>
              <div class="list-content" @click="go(data.ID)"><a >阅读全文</a><span class="el-icon-d-arrow-right"></span></div>
            </div>
          </div>
        </div>
        </transition-group>

想要在博客文章渲染 时用动画 目前只能做到全部元素一致整齐执行动画 怎么样从上到下依次执行呢 还有这种又要怎么配合滚动加载呢

用axios取数据配合滚动加载 还要动画有条理执行 一时想不出思路

Answer 1

可以使用闭包循环没后台给的文章数组 一次push当datas
例如 发牌的动画
`_forPokerPush(PokerArry, target) {

  let PokerArrys = PokerArry;
  for (let i = 0; i < PokerArrys.length; i++) {
    setTimeout(() => {
      target.push(PokerArry[i]);
    }, i * 700);
  }
},`

Answer 2

把数组用setInterval一个个push进去,push完最后一个clearInterval