Vue关于使用transition-group做列表自上而下动画渲染

<div class="listContainer">
        <transition-group class="ys-notices" name="transition1">
          <div class="dataContainer" v-for="(item) in listData" :key="item.id">
            <div class="dataContent">
              <div class="imgDiv">
                <img :src="'data:image/png;base64,'+item.cameraData.faceImage" />
              </div>
              <div class="msgDiv1">
                <p style="white-space:wrap">时间：{{item.cameraData.receiveTime}}</p>
              </div>
            </div>

            <div class="dataContent">
              <div class="imgDiv">
                <img :src="item.similarData[0].similarImage" />
              </div>
              <div class="msgDiv2">
                <p>姓名：{{item.similarData[0].similarName}}</p>
                <p>性别：{{item.similarData[0].similarGender}}</p>
                <p>民族：{{item.similarData[0].similarNation}}</p>
                <p>相似度：{{item.similarData[0].similarScore}}</p>
              </div>
            </div>
          </div>
        </transition-group>
      </div>

/* 设置动画 距离底部80px上移*/
.transition1-enter,
.transition1-leave-to,
.transition12-enter,
.transition12-leave-to,
.transition2-enter,
.transition2-leave-to,
.transition22-enter,
.transition22-leave-to,
.transition3-enter,
.transition3-leave-to,
.transition33-enter,
.transition33-leave-to,
.transition4-enter,
.transition4-leave-to,
.transition5-enter,
.transition5-leave-to,
.transition6-enter,
.transition6-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}
/* 设置完成后透明度为1，用时0.8s */
.transition1-enter-active,
.transition1-leave-active,
.transition12-enter-active,
.transition12-leave-active,
.transition2-enter-active,
.transition2-leave-active,
.transition22-enter-active,
.transition22-leave-active,
.transition3-enter-active,
.transition3-leave-active,
.transition33-enter-active,
.transition33-leave-active {
  opacity: 1;
  transition: all 0.8s ease;
}

/* 设置删除后下一个元素上移的动画 */
.transition1-move,
.transition12-move,
.transition2-move,
.transition22-move,
.transition3-move,
.transition33-move {
  transition: all 0.8s ease;
}

.transition1-leave-active,
.transition12-leave-active,
.transition2-leave-active,
.transition22-leave-active,
.transition3-leave-active,
.transition33-leave-active {
  position: absolute;
}

//渲染的数据每一条数据里面都必须有id，否则动画会变的乱七八糟