反应弹簧过渡。如何平滑地向下移动表单以使 div 出现？无论 div 的高度如何

Question

基本上，我在“更多信息”之类的表单顶部有一个按钮，而信息只是一个带有文本的 div，我想按下该按钮并让表单向下移动，让 div 淡入它上方.我想出了如何基本上做到这一点，但它仍然不能很好地工作。正如我硬编码底部边距应该是多少等，因此当调整 div 大小或其中包含更多文本时它不起作用。

const InfoDiv = styled(animated.div) `
    font-family: "Mulish", sans-serif;
    font-size: 14pt;
    font-weight: 400;
    padding: 10px 5px;
    line-height: 24px;

`;

function RiskCalculator() {
    const [show, setShow] = useState(false)
    const transitions = useTransition(show, null, {
        from: {opacity: 0, marginBottom: -115},
        enter: {opacity: 1, marginBottom: 0},
        leave: {opacity: 0, marginBottom: -115}

    })
    return (
        <MainContainer>
            <Heading>My Heading</Heading>
            <Seperator />
            <div>
                <Button onClick={() => setShow(!show)}>Info</Button>
            </div>
            
            {
                transitions.map(({ item, key, props }) =>
                item && <InfoDiv key={key} style={props}>Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                commodo consequat. Duis aute irure dolor in reprehenderit in 
                voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
                anim id est laborum.</InfoDiv>
            )
            }
            <form>
                <div>
                    Hey there
                </div>
                <input type='text'/>
                <input/>
            </form>
            
        </MainContainer>
    );
}

如您所见，我将 115 硬编码到边距底部的东西中，它就像我想要的那样工作，但这只是因为 115 是我的信息 div 高度的一个很好的近似值，每当我调整窗口大小或添加文字多了，高度明显变化，转场不起作用。

我是不是走错了路，还是我错过了什么

Answer 1

尝试为 marginBottom 以外的其他东西设置动画。例如 maxHeight 给你更好的结果。它并不完美，您必须将其设置为适合所有可能的文本，但它比边距更好。

  const transitions = useTransition(show, null, {
    from: { opacity: 0, maxHeight: "0px" },
    enter: { opacity: 1, maxHeight: "600px" },
    leave: { opacity: 0, maxHeight: "0px" }
  });