FLIP animation on list with display: flex

[lbineau]

I created a small demo here: https://codesandbox.io/s/j1v9387zqy

If .items has display: block and .item has display: inline-block everything is working fine. But if .items has display: flex the items are acting weirdly when you remove them. I think it is because when you position: absolute an item in a flex container it goes to (0, 0) coordinates instead of staying at the same coordinates.

I don't think it is a bug but could worth to mention in the readme for lists.

[lbineau]

Possibly related to https://github.com/cristijora/vue2-transitions/issues/6 and https://github.com/cristijora/vue2-transitions/issues/4

[lbineau]

Definitly not a bug of your library or vue transition group

• https://jsfiddle.net/91tn25zn/
• https://www.w3.org/TR/css-flexbox-1/#abspos-items

[cristijora]

Hey @lbineau Trying wrapping the whole thing in another div https://codesandbox.io/s/jl26mr9r7y

So each element even if it has "absolute" position it becomes absolute for the parent and therefore won't jump to the start of the container.

[lbineau]

Thanks for your anwser. In this case the display: flex is pointless because it applies only on the new wrapper div and not the children items. The children items are inline only because of inline-block (forgot to remove it in my previous example) https://codesandbox.io/s/xr64o77z1o My real use case is a flexbox grid, so it won't work with a wrapper around the cells https://foundation.zurb.com/sites/docs/xy-grid.html

[lbineau]

Any news about this issue?

[AlexDaniel]

Hah! I stumbled upon this ticket because I was trying to figure out an issue with vuetify animations. Basically, my issue is that FLIP animations are working perfectly, except when the removed element is at the start of any line. In that case the element is immediately taking 0 space, which gets it wrapped to the previous line immediately. In all other cases everything is working perfectly. I tried adding display: flex and flex-wrap: wrap, and immediately got the problem described in this ticket. 🤷 What I can't figure out is that in some cases it seems to be working quite well (although I haven't tested it extensively), so it feels like there's a combination of divs and their display properties that do work, but I haven't figured it out yet.