Stacked / Nested FlipMoves problems

[jrmyio]

I ran into the issue when I was using nested FlipMoves but apparently the problem already occurs without nesting flip moves.

I have 2 flip moves that are rendered vertically (on top of each other). The dom looks a bit like (see below for full examples):

<ul>
   <li>
      <header/>
      <FlipMove/>
   </li>
   <li>
       <header/>
      <FlipMove/>
   </li>
</ul>

As soon as the first flip move grows in height (because an item gets added), the second flip move is uneffected, their parent just moves down (expected and wanted behavior).

However, when the first flip move shrinks in height (because an item is removed), the items of the second flip move start animating up (although their parent already jumped up instantly).

The thing that suprises me the most is the inconsistency when items are added or removed. I would expect to either have all dom elements animate in both scenarios, or not animate at all. Am I missing something?

Use the following example to see/test the behavior: https://gist.github.com/ConneXNL/c320db6f8898982f78b1b5cd4dc4cfea

Notice when an item gets removed, the blue Header and FlipMove create an unwanted gap.

A bigger problem happends when nesting the blue and red boxes in a FlipMove: https://gist.github.com/ConneXNL/f77095b265c53774184b85661fd220be

Notice how the second FlipMove's transition starts at the wrong position before animating up.

[joshwcomeau]

Yeah, I wouldn't expect subsequent FlipMoves to animate when the earlier one changes.

Thanks for the examples. I'm pretty busy but I'll try and find the time to look into this in the next few days.

[joshwcomeau]

Hey @ConneXNL,

I finally found some time to look into it a bit. As far as I can tell, the animation is consistent (although not ideal):

It's possible that things have changed since the issue was open, we had a patch release in that time.

The nested example, however, is indeed pretty broken:

If you or any other contributors want to take a shot at fixing it, I created a branch with the examples set up as stories: fix/105-stacked-nested. Otherwise, it may be a while before I find the time to fix it; hopefully the stacked version is workable for now!

(If you want "non-active" FlipMoves to not animate, I think I have an idea: I haven't tested it, but I suspect the problem might be solved if each FlipMove is in a separate component that uses shouldComponentUpdate to ensure that it isn't re-rendered when its props dont change. That way, the non-active FlipMove won't know that its position is changing)