Both move and leave triggered for removed transition-group item if transition-group has display: flex

[dweerd]

Version

2.5.17

Reproduction link

https://jsfiddle.net/pcb17vq4/

Steps to reproduce

See Fiddle.

What is expected?

Only a 'leave' is triggered when removing any item from the list displayed with display: flex.

What is actually happening?

Both a 'leave' and a 'move' are triggered

[ericp3reira]

May I take this one?

[posva]

Go ahead!

[ericp3reira]

Great! I'm working on it.

[jkzing]

This should not be a bug, It's just the difference between display: inline-block + position: absolute and display: flex + position: absolute.

In OP's fiddle there is,

.list-complete-leave-active {
  transition: all 1s;
  position: absolute;
}

Which sets the element to position: absolute when animating.

See the difference when position: absolute is added on element '4':

Try it in this fiddle: https://jsfiddle.net/pcb17vq4/1/

[Justineo]

See @jkzing's fiddle above. Just remove position: absolute during transition and it will be working as expected.

[ericp3reira]

Thanks, @jkzing! I found out that, but was trying to find a workaround.

[dweerd]

Thanks for your efforts!