使用v-move出现了在点击伸缩面板时出现移动出错，是什么原因导致的？

Z时代
2024-02-07
分类：IT

在使用vant的折叠面板时，在循环体外层套上动画标签，使用v-move时，在第一次点击操作列即折叠面板时会导致下一个数据块从当前点击操作列开始一起移动，请问哪位大佬能解决这个问题？？

<transition-group name="player" tag="div">
  <div class="el-block flex_2" v-for="(item, index) in customerList" :key="item.aid">
    <div class="el_title"><div class="serial bgBule">{{ index+1 }}</div> {{ item.orgName }}</div>
    <van-cell title="归属部门" :value="item.orgName" />
    <van-cell title="别名" :value="item.custName" />
    **<van-collapse v-model="activeNames">
      <van-collapse-item title="操作" :name="index">
        <div class="btn-group">
          <van-button class="bgGreen" @click="onDetails('/return-page/details-account-list/'+item.aid)">详情</van-button>
          <van-button class="bgBule" @click="onDetails('/return-page/edit-account-list/'+item.aid)">编辑</van-button>
          <van-button class="bgRed" @click="onDelete(item.aid)">删除</van-button>
        </div>
      </van-collapse-item>
    </van-collapse>**
</div></transition-group>

css

.player-leave-to{
  opacity: 0;
}
.player-leave-to {
  transform: translateX(30%);
}
.player-enter-active,
.player-leave-active {
  transition: all 0.6s;
}
// 以下需要一起用
.player-leave-active {
  position: absolute;
  width: calc(100vw - 20px);
}
.player-move {
  transition: all 0.6s;}