Issue title: Nested keyframe animations behaving erratically
 Issue body: Congrats on the great work, loving react-spring 💯 

I have come across an issue trying to nest some keyframe animations.

I wanted to smoothly open up some vertical space before fading in the target element. Then have that element smoothly adjust it's height to accommodate a child item (e.g. button), and fade in that item only when the space is created.

https://codesandbox.io/s/61wo67o6mr

It actually ended up being worse when I tried to isolate it in the sandbox above. In my project the button does display fine, it's just that the parent element has a fixed height so doesn't accomodate the new child item. Looking into it, the parent element initially transitions open, gets it's height set to auto once it has opened fully, but then the height is set to a fixed value when the component later updates to accomodate the new child item.

Any help much appreciated - perhaps I am going about this the wrong way?



 Comments: 
 Comment 0: I see, this could be tough to fix on my side. 'auto' isn't straight forward, we have to measure out a frame with height set to auto, remember the value and then animate there, when it's all done the animated height is replaced with 'auto' again. That of course makes the animation volatile as nested stuff can grow larger/smaller after the initial measurement, it also makes the animation async, which explains the weird skipping that sometimes happens.

If i was you i'd use 'auto' for sure-cases, where you know that nothing inside will stretch or shrink. In cases where that can happen, better measure out yourself using react-measure and give spring proper values instead of auto.

PS. i made a lib myself that's prone to little hickups: https://github.com/drcmda/react-animated-tree
You can see it if you open something within and then open/collapse on the parent real quick. To reduce the impact i made the animations quicker and gave it a minimal threshold so that the animation completes with less precision:

```jsx
config={{
            ...config.default,
            restSpeedThreshold: 1,
            restDisplacementThreshold: 0.01,
          }}
```

If you're interested, this is the mix-in that realizes auto: https://github.com/drcmda/react-spring/blob/master/src/targets/web/fix-auto.js

Maybe you can see some obvious solution in there. Like i said, it basically detects if you use auto, then renders a full frame with position set to absolute and visibility: hidden, then measures out bounds with the hellish dom api, and in a next frame tells spring the target height/width so that the animation can start.
{'source': 'GithubIssues', 'repo_name_with_owner': 'drcmda/react-spring', 'issue_id': 342260041, 'repo_stars': 8084.0}