css - 如果其他项目被删除，移动类不会应用于过渡组中的剩余项目

Question

我有一个项目列表，其中每个项目都放在一个弹性框中，像矩阵一样显示列表（几行和每行项目）。使用<transition-group class="move">我在<div v-for="item in items" :key="item.id">

move {
  transition: transform 1s;
}

现在，这在更改项目顺序或添加新项目时非常有效；意味着所有现有项目顺利移动到新位置。

但是：如果我从列表中删除项目并且出现一些空白，现有项目不会顺利填补这些空白，而是会在没有动画的情况下跳转到新位置。

这些现有项目表现不同的原因是什么，如果在它们之间放置一个新项目，它们会平稳地移动到它们的新位置，但是当移除相同的项目时会在没有动画的情况下跳回来？如何实现双向平稳移动？

标签： cssvue.jscss-transitions

Answer 1

找到了答案：使用移动过渡，-leave-active 过渡类必须应用一个position: absolute声明，以便将其从布局流中取出，因此兄弟姐妹可以-move in 放置在它周围。