transition-group实现列表交错加载动画

vue界面代码

<transition-group name="list" :css="false" @before-enter="beforeEneter" @enter="enter" @:after-enter="afterEnter">
      <div class="Card" v-for="(item, index) in showTaskArr" :key="item" @click="getEdit(item, index)" :data-delay="index * 200">
        <div class="card1"> </div>
        <div class="cardHead">
          <span>{{ filterTemp(item.tmplType) }}</span>
          <span @click.stop="delOne(item, index)">×</span>
        </div>
        <div class="cardContent">
          <span>{{ item.selectedItem }}</span>
        </div>
      </div>
    </transition-group>

js控制每列加载时间错开

  const beforeEneter = (dom) => {
    dom.classList.add('list-enter-from', 'list-enter-active');
  };

  const enter = (dom, done) => {
    let delay = dom.dataset.delay;
    setTimeout(() => {
      dom.classList.remove('list-enter-from');
      dom.classList.add('list-enter-to');
      //监听 transitionend 事件
      var transitionend = window.ontransitionend ? 'transitionend' : 'webkitTransitionEnd';
      dom.addEventListener(transitionend, function onEnd() {
        dom.removeEventListener(transitionend, onEnd);
        done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
      });
    }, delay);
  };
  const afterEnter = (dom) => {
    dom.classList.remove('list-enter-to', 'list-enter-active');
  };

css代码

<style lang="less" scoped>
  .box {
    display: flex;
    flex-wrap: wrap;

    //.Card:hover {
    //  transition: all 0.1s;
    //  transform: translateY(-2%);
    //}
    .Card:hover .card1 {
      left: 110%;
      transition: all 0.3s;
    }
    .Card:hover {
      transform: translateY(-20px);
      box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
    }
    .Card {
      margin: 1rem;
      background: #fff;
      width: 12rem;
      height: 13rem;
      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;

      opacity: 0;

      overflow: hidden;
      transition: all 0.2s;
      position: relative;
      .card1 {
        position: absolute;
        left: -110%;
        top: 0;
        width: 12rem;
        height: 13rem;
        background-image: linear-gradient(90deg, rgba(245, 245, 245, 0), rgba(245, 245, 245, 0.5), rgba(245, 245, 245, 0));
        transform: skew(-30deg);
      }
      .cardHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;

        span:nth-child(1) {
          background: rgb(230, 230, 230);
          font-size: 12px;
        }
      }

      .cardContent {
        text-align: center;
        line-height: 13rem;
      }
    }
    .list-move,
    .list-enter-from {
      transform: translateY(-100%);
      opacity: 0;
    }
    .list-enter-active {
      //transform: translateY(1200px);
      transition: 3s;
    }
    .list-enter-to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .center {
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 4px 0;
  }
  .formbox {
    display: flex;
    justify-content: space-around;
    div:nth-child(1) {
      width: 80%;
    }
    div:nth-child(2) {
      width: 20%;
    }
    /deep/ textarea {
      height: 22px;
    }
  }
</style>