transition-group with flex parent causes removed items to fly

[turbosheep44]

Version

2.6.11

Reproduction link

https://codepen.io/turboSheep/pen/OJNQGEG

Steps to reproduce

Click the 'Remove Multiple' or 'Remove First 2' buttons and observe the movement of the items.

What is expected?

The rectangles being removed should fade out on the spot.

What is actually happening?

The rectangles fade out and also move to various locations on the canvas.

---

Observe that if the items 1 and 2 are to be removed, then the events fired in the following order:

before-leave#1
leave#1
before-leave#2
leave#2

This means that beforeLeave for the second element is called after leave is called for the first element. So when beforeLeave is called for the second element, the first element already has position: absolute. This means that (while the DOM has not yet rendered the change) the position of the second element has moved to be where the first element used to be, meaning that el.offsetLeft is now 'incorrect'. The visual effect is that the first two elements both float to the same position.

This can be shown clearly by clicking the 'Remove First 2' button.

Similar behaviour has been documented by issue #9713 but the issue was quickly closed in March 2019 with a workaround posted in Jan 2020.

[hamidovz]

if i understood correctly , when the element inside the "transition" component is removed , firstly the transition classes will be added to that element. it mentions in the documentation:

When an element wrapped in a transition component is inserted or removed, this is what happens:

Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition 
classes will be added/removed at appropriate timings.

If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.

If no CSS transitions/animations are detected and no JavaScript hooks are provided, 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).

[turbosheep44]

Yes, I agree that this behaviour is correct as far as documentation is concerned. However, this visually causes the fading elements to jump around as described above.

I want to know whether there is a way to get the desired effect (no elements jumping around when transitioning out) using the current Vue version and if not, to bring this to the attention of a developer who knows to/can point me in the direction of adding the necessary feature.

[renatodeleao]

I believe I bumped into this issue as well today. Have a slightly different scenario: a FABs grid (floating-action-buttons) on the bottom-right of the viewport. Newly added buttons will appear to fly from viewport top-left, even though those elements (that are absolute when animated) are direct children of a positon: relative parent-container.
Creating a new stacking context with transform: translated(0,0,0) or isolation: isolate or will-change: transform don't solve the issue as well.

Codesandbox: https://9kt1h.csb.app/

EDIT: possibly related with #8785 and #7879 and #5800

transition-group-flying-items.mp4

[Harrald]

I run in to a similar issue.
I have modified the demo provided by @renatodeleao to use Vue 3.2 and the problem persists: https://j8uokg.csb.app/

[jelledv49]

I run in to a similar issue. I have modified the demo provided by @renatodeleao to use Vue 3.2 and the problem persists: https://j8uokg.csb.app/

Same here. Also using Vue 3.2. Currently using the workaround (#9713 (comment))

[Justineo]

I think flex and grid layout do not play well with leaving transitions of FLIP animations in general.

We are applying an absolute layout for elements which are transitioned out. Elements with position: absolute will stay at their "static position" if their top/right/bottom/left are all auto. For BFC this position is the original position before they are absolutely positioned as their size do not affect those elements before them in the flow. But for FFC and GFC, this "static position" becomes the start of the container as the layout for elements before absolute positioned elements are recalculated, so the position for "as if they are still there" doesn't make much sense.

[thorstensson]

Hello.

I cannot say if I fully grasp the gist of the problem without seeing it run; but I just now encountered a similar problem with flexbox and transitions too. Things were moving due to what was stated above about before-leave and leave. So I came up with an ugly solution—one that, over coffee, I'm wondering if I should stick too. But it allows for me to have a flex container doing its things. So here goes:

<div class="container-absolute">
    <div class="container-flex">
        <div class="page">
            <h1 class="page__heading"> {{ data.title }}</h1>
            <p class="page__paragraph">{{ data.content }}</p>
        </div>
    </div>
</div>

Forgive the wrapper namings, will update. Actually, page is also flex. Ok so container-flex only has display:flex, which works, albeit other flex stuff will be nullified, such as flex-flow. Thing is page is now also display:flex, and this one will now work, and not move during a fade transition, and on that I can set normal flex properties on the items.

Downside, an abundance of containers.

T.