Stay_Here_too 2022-12-14 10:06 采纳率: 0%
浏览 18
已结题

使用vue的v-move动画类出现了在点击vant折叠面板时出现移动bug,有什么可以解决的办法吗?

在使用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;
  }


  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 12月22日
    • 创建了问题 12月14日

    悬赏问题

    • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
    • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
    • ¥40 万年历缺少农历,需要和阳历同时显示
    • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
    • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
    • ¥15 关于Java的学习问题
    • ¥15 如何使用chatgpt完成文本分类任务?
    • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
    • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
    • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"