我使用useTransition钩子给列表元素添加动画，它的子元素的高度不是一个固定的数字。如果我设置{from:{height:0},enter:{height:'auto'}，元素将失去动画。我想在过渡动画div的孩子有一个动态的高度属性，任何结论？：B
{from:{height:0},enter:{height:'auto'}
fykwrbwg1#
导致这个问题的原因是transition不能与height:auto一起工作。我发现了一些解决这个问题的技巧。1.使用max-height代替height1.使用grid显示，并在0fr和1fr之间切换grid-template-rows1.在挂载时获取元素innerHeight。official expample
transition
height:auto
max-height
height
grid
0fr
1fr
grid-template-rows
sh7euo9m2#
您正在尝试在AnimatedValue和AnimatedString之间进行动画。在React Spring中，“height”属性应该是一个数值，以便平滑插值。要解决此问题，您可以使用一种变通方法，即设置“maxHeight”属性而不是“height”属性的动画。当您想要显示内容时，可以将“maxHeight”属性设置为足够大的值，而当您想要隐藏内容时，可以将其设置为0。这样，您实际上是在使用“maxHeight”属性控制可见性，同时仍然实现所需的动画效果。
2条答案
按热度按时间fykwrbwg1#
导致这个问题的原因是
transition不能与height:auto一起工作。我发现了一些解决这个问题的技巧。
1.使用
max-height代替height1.使用
grid显示，并在0fr和1fr之间切换grid-template-rows1.在挂载时获取元素innerHeight。official expample
sh7euo9m2#
您正在尝试在AnimatedValue和AnimatedString之间进行动画。在React Spring中，“height”属性应该是一个数值，以便平滑插值。
要解决此问题，您可以使用一种变通方法，即设置“maxHeight”属性而不是“height”属性的动画。当您想要显示内容时，可以将“maxHeight”属性设置为足够大的值，而当您想要隐藏内容时，可以将其设置为0。这样，您实际上是在使用“maxHeight”属性控制可见性，同时仍然实现所需的动画效果。