<transition-group> does not perform FLIP correctly when multiple items are removed in one step

[danielgjackson]

Version

2.4.2

Reproduction link

https://jsfiddle.net/fqes6q3b/1/

Steps to reproduce

Click the 'Remove three' to remove multiple items in one step.

What is expected?

Removing single items works as expected (items drop vertically).

Removing multiple items should have the same animation as repeated single removals -- but it does not work as expected.

What is actually happening?

When multiple items are removed, the horizontal location of the items shifts to that of the first item removed.

---

I would guess that the <transition-group> is adjusting each item's class as it goes through the elements, setting it to '-leave'active', which has 'position: absolute' — this takes it out of the flow, so the following element now has the same 'left' position as the previous, so that element's horizontal position has now been affected when the FLIP calculation is made. (This would explain why single element removals work as expected — there are no 'other elements' affected).

If this is correct, this could be fixed, for example, if the <transition-group> accumulated the class adjustments that it would make, and only made them after the FLIP animation calculations were made.

(Edited: the 'new-issue.vuejs.org' tool translates html entities: e.g. &lt; to < for the github issue, which then hides unknown tags.)

[posva]

mmh, I'm not sure we want to force that behaviour. It's more flexible to allow the user to specify the offset per child in CSS
I really think this is how we want it to work. Because they're absolutely positioned, (as you said), they overlap each other

[danielgjackson]

(This all assumes that my guess of the cause is correct...)

I don't think this is happening just because of the absolute positioning, I think it's just the ordering of the FLIP calculations and applying the style changes. If I remove three items in one go, then they collapse towards the location of the first removed item (and only the first will fall directly downwards).

It seems to me that the FLIP calculation works out the correct animation before applying the absolute positioning, and that works fine -- as long as only a single item is removed!

This issue is that when two or more items are removed, the calculation fails to correctly calculate the item's end position, and it seems to make sense that the absolute positioning is being applied by the transition-group as it iterates through its children -- it seems to make changes to the classes/styles as it goes through the items (when multiple elements are removed), each change affects subsequent items in an unexpected way (so any previous elements in this removal have already been removed from the flow before it calculates their end position). This explains why there is no issue with a single removal, and the problem is only seen when multiple items are removed.

It would work as the user expects if the transition group firstly calculated the FLIP positions for the removed elements as they currently stand (without yet mutating the classes/styles), and only after doing them all made any changes to the classes/styles of the elements. This way, the elements would animate as expected.

[posva]

I don't think this is happening just because of the absolute positioning, I think it's just the ordering of the FLIP calculations and applying the style changes. If I remove three items in one go, then they collapse towards the location of the first removed item (and only the first will fall directly downwards).

Not really, if you remove many by clicking on Remove One, you'll see the same behaviour

[danielgjackson]

Ah yes, sorry -- that's quite right! I've made a fiddle to test just that: https://jsfiddle.net/hxm5q5Lb/

Unless this would make a good feature request (something like: when an element is removed, its absolute/transformed position is calculated relative to its parent, and it's held there while its -leave animation applies), as this isn't a bug, I suppose it should be closed.