Vue结合Bootstrap实现列表过渡时删除项异常移至顶部的问题

我刚梳理了你的问题，这确实是Bootstrap的默认样式和Vue过渡组的定位逻辑冲突导致的，咱们一步步来修复：

问题根源 #

你给.mylist-leave-active设置了position: absolute，目的是让剩余列表项能平滑补位，但Bootstrap的list-group（也就是你用<transition-group>渲染的ul元素）默认没有设置position: relative。这就导致绝对定位的删除项会相对于页面（或更上层的定位元素）定位，而不是它的父列表容器，所以才会跑到顶部。另外，绝对定位后的列表项会丢失默认的100%宽度，也会造成视觉错位。

修复方案 #

只需要调整CSS样式，给父容器添加相对定位，并修正离开元素的宽度：

修改后的CSS代码 #

/* 给列表容器添加相对定位，让绝对定位的子元素相对于它定位 */
.list-group {
  position: relative;
}

.mylist-item { 
  transition: all 1s; 
  /* 确保继承Bootstrap的盒模型，避免宽度计算偏差 */
  box-sizing: border-box;
}

.mylist-enter, .mylist-leave-to { 
  opacity: 0; 
}

.mylist-leave-active { 
  position: absolute;
  width: 100%; /* 保持和其他列表项一致的宽度 */
}

为什么这样有效？ #

• position: relative加到list-group上后，绝对定位的删除项会始终相对于父容器定位，留在原位置完成淡出动画。
• width: 100%确保删除项不会因为绝对定位收缩，和其他列表项视觉保持统一。
• 剩余列表项会因为删除项脱离文档流，平滑向上补位，完全符合你“删除项淡出、剩余项平滑补位”的预期。

内容的提问来源于stack exchange，提问作者MaxNoe