transition-group item with flex parent moves to top-left

[franciscolourenco]

Version

2.6.8

Reproduction link

https://codepen.io/andymerskin/pen/eRNvLR

Steps to reproduce

1. Click in any rectangle except the first one

What is expected?

The rectangle should fade out, but not move

What is actually happening?

The rectagle moves to the left-top corner while fading away

---

This seems to be caused by the flex parent combined with absolute positioning of the rectangle leaving

Related

• Both move and leave triggered for removed transition-group item if transition-group has display: flex #8973 – The solution suggested in this ticket only works if the rest of the elements are not being animated with move.

[posva]

it goes to the top because you are using position absolute

[franciscolourenco]

That fact was explained in the description of the ticket. If there is no intention of supporting this use case, it would be more interesting to know why.

…

On 15. Mar 2019, at 17:54, Eduardo San Martin Morote ***@***.***> wrote: Closed #9713. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[posva]

I'm saying that this is working correctly: absolute makes it go to the top left in the flex container even without top or left (not the case with a regular container) and because it's in a transition group, Vue adds the transform attribute (to move things) making it move to the top left

[sofuxro]

Same issue for flex and grid

Found this solutions:

<transition-group
    @before-leave="beforeLeave">
    ...
</transition>

methods: {
    beforeLeave(el) {
        const {marginLeft, marginTop, width, height} = window.getComputedStyle(el)

        el.style.left = `${el.offsetLeft - parseFloat(marginLeft, 10)}px`
        el.style.top = `${el.offsetTop - parseFloat(marginTop, 10)}px`
        el.style.width = width
        el.style.height = height
    }
}

thanks to docmars in forum.vuejs.org

[adamreisnz]

The reason position: absolute is added is likely to accomplish this effect: https://vuejs.org/guide/built-ins/transition-group#move-transitions

In the example, this works fine. But when using a flex parent container, the items move to the top of the container the moment they are animated away, which is an undesired side effect.