Vue.js 使用vue和引导进行列表转换：防止已删除项目上移

使用vue.js和bootstrap，尝试实现一个包含项目的转换组 淡入淡出和剩余的项目移动到位，我遇到淡入淡出的项目同时向上移动到列表位置0

只有当我将vue转换组与引导列表组一起使用时，我才能得到这个bevahiour

使用不带列表组的普通转换组的行为符合我的预期

参见JSFIDLE：

js

---

我更改了

的css。我的列表保持活动状态

以处理

高度

和

填充

，而不是

位置：绝对

希望这能帮助你更接近你的目标

.mylist-leave-active {
  /* position: absolute; */
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  font-size: 0;
  color: transparent;
}

---

这是因为您使用的是

位置：绝对关于离开项目。因此，这种行为是预期的。如果我不使用
position:absolute
，其他项目不会移动，而是在动画完成后弹出。这也不能解释为什么只有在使用
列表组时才会发生这种情况。您不必使用position:absolute，也可以使用不同的道具制作动画。Thx，是的，这是一个更近的距离。但我仍然想知道为什么vue示例的设置在普通列表上有效，而在列表组上无效。知道吗？嗯，我不确定。Vue在这里处理的唯一事情是添加和删除相关类。剩下的只是CSS转换。如果有问题，很可能是CSS问题，而不是Vue问题。希望这有帮助。
<div id="app" class="card">
  <div class="card-header">
    <button @click="addItem">add</button>
    <button @click="removeItem">remove</button>
  </div>
  <transition-group tag="ul" name="mylist" class="list-group">
    <li class="mylist-item list-group-item" v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

.mylist-item {
  transition: all 1s;
}
.mylist-enter, .mylist-leave-to {
  opacity: 0;
}
.mylist-leave-active {
  position: absolute;
}

.mylist-leave-active {
  /* position: absolute; */
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  font-size: 0;
  color: transparent;
}