CODEWITHSUNDEEP
vuejs2vuejs-transition
neric
neric

Reputation: 4221

List transitions in vuejs, changing the underlying array

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.

Upvotes: 1

Views: 994

Answers (2)

neric
neric

Reputation: 4221

Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:

list-leave-active {
 display: none;
}

Resulting Pen

Upvotes: 2

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

A css fix may be to wrap the contents within a box of some height and set overflow hidden.

So, even when new elements co-exist the jump in scrollbar can be avoided.

Upvotes: 0

Related Questions