如何在 @react-spring useTransition 中将高度从 0 设置为“auto”？

Question

我使用 useTransition 钩子为列表元素添加动画，其子元素的高度不是固定数字。如果我设置

{from:{height:0},enter:{height:'auto'}

，元素就会失去动画。

我希望过渡动画div中的子元素具有动态高度属性，有什么结论吗？ :b

Answer 1

导致此问题的原因是

transition

不能与

height:auto

一起使用。

我找到了一些解决这个问题的技巧。

1. 使用

   max-height

   代替

   height

2. 使用

   grid

   显示，并在

   grid-template-rows

   到

   0fr

    之间切换 

   1fr

3. 挂载时获取元素innerHeight。 官方示例

Answer 2

您正在尝试在 AnimatedValue 和 AnimatedString 之间设置动画。在 React Spring 中，“height”属性应为平滑插值的数值。

要解决此问题，您可以通过动画“maxHeight”属性而不是“height”来使用解决方法。当你想显示内容时，“maxHeight”属性可以设置为足够大的值，当你想隐藏内容时，可以设置为0。这样，您基本上可以使用“maxHeight”属性控制可见性，同时仍然实现所需的动画效果。