I’ve run into a frustrating issue where my list items that are leaving are jumping to the top-left of its container while using the FLIP move/leave technique.
position: absolute; is necessary on
list-leave-active in order for the rest of the items to move into place, however it’s also causing the leaving element to jump to the top-left of its parent container before its leave transition starts (which is to fade and translate down 10px, in this case).
I need my list to use flexbox in order to get the items to flow and wrap easily, so positioning my elements absolutely in the grid isn’t an option. I thought the point of implementing FLIP was for elements to retain their position properly and enter/leave/move gracefully with that in mind.
Here’s a CodePen with an example reproducing the issue on the latest version of Vue (2.3.3).
Click on the items to remove them and see the issue:
Any help or suggestions would be appreciated. Thanks!