[Feature Request] Magical height: 'auto' for <Transition />

[rockmandash]

Hello, thank you for this wonderful library!
This library is amazing, I was trying height: 'auto' for .
But I notice that seems not supporting this feature, it would be wonderful for supporting it, or other method for achieving + height: 'auto'.
Thank you very much!!!

[drcmda]

@rockmandash auto is supported

demo: https://codesandbox.io/embed/pmjomxn60

api: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#animating-auto

where did you have problems? and does the springs parent declare proper bounds (position: absolute/relative)?

PS. and you're animating on the web, right? other targets don't support auto yet, it needs some mix-in to do this.

[rockmandash]

@drcmda Thank you for your reply!
Sorry, I didn't make my question clear, my bad!
I was trying to do this:

<Transition from={{ height: 0 }} enter={{ height: 'auto' }} leave={{ height: 0 }}>
  {toggle && Component}
</Transition>

I found out this didn't work, so I was wondering if

<Transition /> // sorry my markdown skill is bad, I found out if I type this without quote, markdown will ignore this text.

can also support Magical height: 'auto', or is there any method to do this?
Thank you for your amazing library again!

[drcmda]

Transition internally is also just a wrap around spring, auto should work. For instance, try this example:

https://codesandbox.io/embed/j150ykxrv

and change 100 to 'auto'. When it doesn't work, it's probably because it needs more context, like parents positioning isn't absolute or relative, or the parent has zero height/width + overflow, something like that.

[rockmandash]

@drcmda Thank you!
Now I know I need more context, thank you!

[dvnrsn]

When it doesn't work, it's probably because it needs more context, like parents positioning isn't absolute or relative, or the parent has zero height/width + overflow, something like that.

When I try height: "auto" on the enter, I get

TypeError: Cannot read property 'props' of null
    at Object.fixAuto [as inject]

Changing positioning on parent seems to have no effect and the parent does not have zero height. Any idea what I am misunderstanding?

https://codesandbox.io/s/m86qjl8kp

[drcmda]

@dvnrsn i didn't check against the case where a spring returns undefined, it should be fixed now.

[dvnrsn]

Thanks, were module references changed in 5.5.2?
https://codesandbox.io/s/m86qjl8kp

[drcmda]

Yes, should be, but doesnt look too good there, i have no idea what "globals" is supposed to be. I'll take a look ...

[drcmda]

Dammit, something is seriously wrong - my macbook was dropping keys and i had it sent in, im on windows now and it seems to resolve files differently. The last build is screwed up ... :-S

[drcmda]

@dvnrsn now it should be fine: https://codesandbox.io/s/lpqkzk9137

I made some changes to your sandbox. you wouldn't see any height transition because there's no css overflow, with height set to 100 on the inner element, the outer element would simply flow over without any visual effect. I've also set it to absolute, because when you toggle it out it would take space, shifting a newly appearing element out of the way. Also added the native flag, without which animated.div doesn't make much sense.

[drcmda]

@dvnrsn one more thing, your sandbox has react/react-dom 16.3.1 in there, everything before 16.4.1 had a bug in there regarding getDerivedStateFromProps, in react-springs case this would make exit-transition elements stick around. They've fixed it since then.