how can i set height from 0 to 'auto' within @react-spring useTransition?

Question

I used useTransition hook to add animation to a list element, and its child element's height is not a fixed number. if I set {from:{height:0},enter:{height:'auto'}, the element lose animation.

I want the children in transition animation div have a dynamic height property, any conclusions? :b

Please provide enough code so others can better understand or reproduce the problem. — Community, Jul 05 '23 at 03:26

alex · Answer 1 · 2023-07-05T03:59:02.573

0

the reasong cause this problem is that transition doesnt work with height:auto.

I found some tricks to solve this problem.

use max-height instead of height
use grid display, and toggle grid-template-rows between0fr to 1fr
get element innerHeight when mount. An official expample

edited Jul 05 '23 at 03:59

answered Jul 05 '23 at 03:31

alex

11
3

https://juejin.cn/post/7196843994030342200 – alex Jul 05 '23 at 03:32

how can i set height from 0 to 'auto' within @react-spring useTransition?

1 Answers1