在 vuejs 中列出转换，更改底层数组答案

【问题标题】：List transitions in vuejs, changing the underlying array在 vuejs 中列出转换，更改底层数组
【发布时间】：2019-06-29 00:16:12
【问题描述】：

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

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

不管是否可以拖放元素，如果我们要淡入/淡出新/旧元素，它们将在动画期间共存，这不是很好as seen in this pen

无论如何要淡出，更改数据，然后淡入新的，同时保持列表的高度？

请注意，如果没有淡入淡出，问题仍然很明显： Pen of my issue:点击切换数据按钮查看问题。

【问题讨论】：

标签： vuejs2 vuejs-transition

【解决方案1】：

原来是pretty know issue。通过阅读此线程并玩弄this example，我能够通过以下方式实现我喜欢的目标：

list-leave-active {
 display: none;
}

Resulting Pen

【讨论】：

【解决方案2】：

css 修复可能是将内容包装在某个高度的盒子中并设置溢出隐藏。

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

【讨论】：