React-spring: How to animate variable height items in Transition

[JanuaryLimes]

Hi, is it possible to to animate variable height items in Transition? I stumbled on this strange behavior trying to do so, I tweaked a little bit demo example to illustrate what I'm trying to do:

https://codesandbox.io/embed/cocky-sutherland-c4wl6

Can you verify whether is it a bug or am I doing something wrong?

[drcmda]

yes, but measuring auto is messy and you need to employ some css safeguards like proper positioning: https://codesandbox.io/s/sad-franklin-txo47 or else there is no way to determine actual height since the fragment has to be rendered position:absolute for a single frame.

we will remove auto completely, since with hooks doing this stuff in user-land is easy (useMeasure) and under your full control.

@aleclarson this is one of the troubles i meant

[JanuaryLimes]

Thanks for the reply :wink: I will probably use solution with 'css safeguards' thing.

But I'm curious how to use useMeasure within useTransition, how can I access measured height in 'enter' transition definition? I'm sorry if it is a silly question but I have troubles understanding useTransition, can you give me an example?

[itayganor]

@JanuaryLimes Have you ever solved it?

[JanuaryLimes]

If I remember correctly I went with https://www.framer.com/api/motion/animate-presence/ from motion