vuejs中的列表转换，改变底层数组
List transitions in vuejs, changing the underlying array
我需要能够在我的垂直列表中设置拖放动画。我使用 vuedraggable，将我的列表包裹在 transition-group 中，一切都很顺利。直到我从服务器获取新数据。现在由于引入 transition-group 瞬间，旧数据和新数据一起存在于 DOM 中，导致列表扩展并将随后的 div 向下和向上推。
根据文档，这是一种预期：
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
无论是否能够拖放元素，如果我们要淡化 in/fade 出 new/old 元素，它们将在动画期间共存，这不是很好as seen in this pen
无论如何要淡出，更改数据，然后淡入新数据，同时保持列表的高度？
请注意，没有 fade 问题仍然很明显：
Pen of my issue:点击切换数据按钮查看问题。
一个 css 修复可能是将内容包裹在一定高度的框中并设置溢出隐藏。
因此，即使新元素共存，也可以避免滚动条的跳转。
结果是 pretty know issue. By reading through this thread and toying with this example，我可以通过使用以下方式实现我喜欢的效果：
list-leave-active {
display: none;
}
我需要能够在我的垂直列表中设置拖放动画。我使用 vuedraggable，将我的列表包裹在 transition-group 中，一切都很顺利。直到我从服务器获取新数据。现在由于引入 transition-group 瞬间，旧数据和新数据一起存在于 DOM 中，导致列表扩展并将随后的 div 向下和向上推。
根据文档，这是一种预期：
the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).
无论是否能够拖放元素，如果我们要淡化 in/fade 出 new/old 元素，它们将在动画期间共存，这不是很好as seen in this pen
无论如何要淡出，更改数据，然后淡入新数据，同时保持列表的高度？
请注意，没有 fade 问题仍然很明显： Pen of my issue:点击切换数据按钮查看问题。
一个 css 修复可能是将内容包裹在一定高度的框中并设置溢出隐藏。
因此，即使新元素共存，也可以避免滚动条的跳转。
结果是 pretty know issue. By reading through this thread and toying with this example，我可以通过使用以下方式实现我喜欢的效果：
list-leave-active {
display: none;
}