列出vuejs中的转换，更改基础数组

Question

我需要能够对垂直列表中的拖放进行动画处理。我使用vuedraggable，将列表包装在transition-group中，一切都很好。直到我从服务器获取新数据。现在由于瞬间引入了transition-group，因此旧数据和新数据一起在DOM中一起存在，从而导致列表的扩展并随后推后div进行了备份。 根据文档，这是一种期望：

  

将执行用于插入和/或删除的DOM操作   紧接在下一帧（注意：这是浏览器动画帧，   与Vue的nextTick概念不同。

无论是否能够拖放元素，如果我们要淡入/淡出新/旧元素，它们将在动画期间同居，这并不好as seen in this pen < / p>

是否要淡出，更改数据，然后淡入新的数据，同时保持列表的高度？

请注意，在不褪色的情况下，问题仍然很明显： Pen of my issue:单击切换数据按钮以查看问题。

Answer 1

css的修复方法可能是将内容包装在一定高度的盒子中，并将溢出设置为隐藏。

因此，即使新元素共存，也可以避免滚动条中的跳转。

Answer 2

原来是pretty know issue。通过阅读此线程并使用this example玩弄，我可以通过使用以下方法实现自己喜欢的事情：

list-leave-active {
 display: none;
}

Resulting Pen