vuejs2 - List transitions in vuejs, changing the underlying array

Question

I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up. This is kind of expected per the docs:

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).

Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen

Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?

Note that without fade the problem is still obvious: Pen of my issue: click the switch data button to see the issue.

Answer 1

事实证明这是一个非常熟悉的问题。通过阅读此线程并玩弄此示例，我能够通过以下方式实现我喜欢的目标：

list-leave-active {
 display: none;
}

结果笔

Answer 2

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

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