React-spring: [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.

[wilcoschoneveld]

Thanks @drcmda for the amount of work you've already put into this library, I'm a huge fan.

I'm working on a tree component where I want to animate child nodes into view, and this can happen some levels deep. It seems that the outer 'auto' height transition does not respond well to the inner 'auto' height transition. Example: https://codesandbox.io/s/o75k1knl6q

Is this a bug of the framework or should I approach this differently?

[drcmda]

It doesn't calculate height properly, which most likely means it doesn't have enough context or something else is fishy - let me check ...

[drcmda]

Ok, auto is definitively broken - again, probably the last commit. :-S react-animated-tree is down aswell with latest react-spring. I'll look into it ...

[dvnrsn]

Agreed, appreciate all the work. @wilcoschoneveld thanks for the post. I was having this delayed nested height animation jump issue locally but was not able to replicate on codesandbox so I figured it was something with my code and gave up.

[drcmda]

@wilcoschoneveld @dvnrsn hang in there i'm almost done. i implemented some part of spring from scratch using react 16 lifecycles and trying to clean it up as best as i can in order to make the most complelx stuff like auto not such a headbreaker. I'll be fixed very soon.

[drcmda]

[email protected] (and newer, if available) should take are of "auto"

[wilcoschoneveld]

Cool! I couldn't get 5.6.1 to work with the example though; https://codesandbox.io/s/o75k1knl6q. Are there still issues?

[drcmda]

@wilcoschoneveld looks like it :( , i only checked the demos on the frontpage which started working again. auto is really messing me up these days ...

[drcmda]

@wilcoschoneveld I think i've got it now: https://codesandbox.io/s/k27m664yyo

Turns out auto is insanely complex in nested situations. Your example was especially hard because you update all treenodes on every change (this is why react-animated-tree did work, because each node controls its own state).

To get anywhere i've had to introduce a new prop for spring. It's all explained here:

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

[DominicTobias]

Hi do you know why it doesn't work with v8? Thanks

Demo: https://codesandbox.io/s/3wwxnmw51

[trlmkb]

@DominicTobias not sure why, but if you remove attribute native from , it seems to be working