leaveAnimation is strange with bottom aligned lists

Hi, thank you very much for your lib. react-flip-move works really well for me in most cases where I have a normal list and every new item is added to the end of the list.

------container------
  ---list---
    -item1-
    -item2-


------container------

However I want to use this for notifications which animate from bottom to top. In this case my container is position: 'fixed' and bottom: 0. It looks like this:

------container------


    -item1-
    -item2-
  ---list---
------container------

The enter animation works fine, but the leave animation is strange. When I remove -item1- it will be displayed behind -item2-:

------container------



    -item2- (-item1- onLeave)
  ---list---
------container------

I thought that would be because the container immediately changes its height to the height of -item2- (because it is the only remaining item), but setting maintainContainerHeight to true results in this:

------container------


    -item2- (moves up for a short moment)

  ---list---
------container------

[donaldpipowitch]

Just tested it. Works great. Thanks.

[joshwcomeau]

Hi @donaldpipowitch,

Thanks for the kind words 😃

Gonna talk through this problem, mainly for my own benefit, but also for any contributors who want to help tackle this issue.

So yeah, the problem has to do with the fact that we’re using the element’s relative offset from the top of the parent. In other words:

----------container------------
                |
              20px
                |
           ----item----

When items are set to leave, I remove them from the DOM flow by setting position: absolute and top: 20px. Because it’s removed from the DOM flow, though, the parent container shrinks, and now it’s offset 20px from the new top of the container.

maintainContainerHeight solves this problem but introduces a new one: all of the other items are counting on the container to shrink. Without that shrinkage, there’s no distinction between this and a regular, top-aligned list; items will move up to fill the space, not down.

I have an idea for how to fix it, and it might also tackle some other issues I’ve had with display: flex. Essentially I would keep track of the absolute position of the parent container. When an animation is triggered, I’d check to see where the new top/bottom/left/right of the parent container is, and use that to determine which “side” to be relative from.

So in this case, the top has changed but the bottom has remained constant, so I would animate all the children relative to the bottom of the container, not the top.

Will spend some time on this today but no promises on a quick fix.