使用vue里面transition-group出现的问题

Question

麻烦您了，这个真的想了好久不知道怎么实现

  <transition-group tag='ul' name='op' class="content">
    <li v-for="item in state.newList" :key="item.id" class="list-item" >
      <div class="le">
        <h2>{{item.title}}</h2>
        <p v-html="item.content"></p>
      </div>
      <div class="ri">
        <img :src="item.coverImg" alt="coverImg" @click="filte(item.id)">
        <p>2021-10-24</p>
      </div>
    </li>
  </transition-group>

就像这样的一个列表，我点击图片就删除这个li。我想用过渡还有让其他没有删除的元素平滑的过渡，我设置了下面的这些样式

 .op-leave-active{
   transition: all 1s linear; 
   position: absolute;
}
.op-leave-to{
  transform: translateX(-20px);
}

.op-move {
  transition: transform 3s ease;
}

点击时的效果像下面图片上的

但是我设置在op-leave-active为 position: absolute;的话，将要删除的这个li的位置就变了，我想的是向左移动20px消失，有什么办法让我的这个列表做到删除的元素向左移动20px消失，然后其他的li使用op-move这个类平滑的过渡到变化后的位置吗？
理想的效果是:

我的因为设置了position他要往下面跑,不知道怎么解决

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。


因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。