Nested transitions causing elements to animate IN when unmounting

[mattgreenfield]

I'm trying to nest transitions so that the background fades in and the text content slides in.
It works find when a component transitions in but when un-mounting, the first transition (fade) leaves correctly but the second transition (slide) enters again.

I have a sandbox, you can see the text slides up from the bottom again when you remove an item, rather than sliding from the center back down - https://codesandbox.io/s/1z30zm6z8l
You'll note that this demo doesn't support adding more than 2 items are i've hard coded the keys :(

It seems it could be related to this #118 but no amount of moving keys around seems to help me.

Any help would be much appreciated. It may be that this isn't even possible with this library?

Thanks,

[drcmda]

@mattgreenfield this doesn't look correct to me, the nested transition has no reason to ever go into leave, because the key is always the same. When the parent transition exits out, it will simply remove the nested transition. Transition tracks addition and removal of its own children, if the transition itself is being removed, it can't animate its children out (react simply calls componentWillUnmount and that's it).

You also duplicate keys, after pressing add three times there are 2 elements with the keyname "two".

Have you looked into alternatives? For instance, the config prop can be a function that gives you the name of the prop that animates, so you can animate the background slower than the foreground.

config={name => {
  switch(name) {
    case 'opacity': return { tension: 10, friction: 20 }
    case 'transition': return { tension: 10, friction: 40 }
  }
}}

Or perhaps keyframes, like this: https://codesandbox.io/embed/zl35mrkqmm

[mattgreenfield]

Thanks so much for the tips @drcmda - I've ended up with what I needed https://codesandbox.io/s/q33qnoz4ow
I'll be trying to implement this with our real modal system tomorrow so will see how it goes!

[ritz078]

@drcmda In the example above provided by @mattgreenfield , how to make the same transition work if the component is unmounting on close? currently only the opacity and transform change.

[drcmda]

Could you adapt the sandbox with updated dependencies and the props you'd like to animate?

[ritz078]

So I want the modal to be in the DOM only when it's open. In mattgreenfield's the element is always present with opacity:0. I want to animate the same props (need similar animation) but the only change is that I want to mount/unmount the component based on state.

Here is the updated sandbox.
https://codesandbox.io/s/qqj1w160xw

[mattgreenfield]

I ended up setting a timeout in my closeModal function so that the modal would only be removed from the DOM once the animation had finished - and using a Spring rather than a Transition.
We've hard coded the timeout but I believe there is some kind of onAnimationEnd event that we could be using instead.

[drcmda]

@ritz078 for mount/unmount you should use the Transition component, your modal would then enter-in or exit-out and then disappear/unmount