Nested Flipped elements not working when outer Flipped is exiting/entering

[yang]

trafficstars

(I think this is loosely related to #77 but a different issue.)

This is one of the basic examples, where a square moves from the corner to the center of the screen:

https://codesandbox.io/s/simple-reactfliptoolkit-example-2-divs-become-1-nponn

If I wrap the squares in a Flipped that is entering/exiting, things break—it doesn't seem to correctly translate to the destination, ending up with a matrix transform that never goes away. If you disable that transform in Chrome's CSS inspector, you can see it correctly centering on the screen.

https://codesandbox.io/s/oy4kv

If the outer Flipped is changed to have matching flipId's, things work (as can also be seen in e.g. react-flip-toolkit's nested Cards example).

https://codesandbox.io/s/simple-reactfliptoolkit-example-2-divs-become-1-n1y2c

Do you know what's happening here?

[yang]

Thinking about this some more...

If this were fixed, there's possibly still an issue—if exit/flip/enter transitions are configured to overlap simultaneously, then we might see two squares at once. One is part of the exiting DOM tree, and the other is part of the entering/flipping DOM tree.

So you'd need to completely hide the square in the exiting DOM tree, and also ensure that flipping square stays visible (if there's a fade-in transition on the entering tree, we don't want the square to be fading in as well).

[aholachek]

The issue you brought up in the first comment should be fixed in 6.6.3. Thank you for catching it and creating the test case!

I'm not quite sure I understand what the potential problem is that you're talking about in the second comment, though.

[yang]

Oh that's great!

When the entering/exiting parents are animated, though, the child still does not seem to be transitioning properly, only fading out and in (also fades in at the corner, never making it to the center):

https://codesandbox.io/s/simple-reactfliptoolkit-example-2-divs-become-1-xq2sy

As for the second comment, it's still blocked on the transitions, but basically if in this example you set handleEnterUpdateDelete={simult}, then it's wondering whether you'll see two squares (one fading out at the origin, while the other flies from the origin to the destination).