React-spring 转换。如何平滑地向下移动表格以便出现 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 高度的一个很好的近似值，每当我调整了 window 的大小或添加了更多文本，但高度明显发生了变化，并且过渡不起作用。

我是不是做错了，还是漏掉了什么

Answer 1

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

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

React-spring 转换。如何平滑地向下移动表格以便出现 div？ div 不论身高

React-spring transition. How to move form smoothly down so that div appears? No matter the height of the div

css-transitions

css-animations

reactjs

react-spring