React MUI Slide动画致上方内容瞬间上移问题求助

使用MUI的Slide组件实现按钮滑入动画时，动画本身正常，但元素挂载瞬间会占据容器完整高度，导致上方内容突然向上偏移。当前组件结构如下：

<Slide
  unmountOnExit
  key={2}
  direction="up"
  in={showLink}
  container={containerRef.current}>
  <Button
    sx={{
      mt: 1,
    }}
    variant="contained"
    color="secondary">
    Support now
  </Button>
</Slide>

解决方案 #

• 固定Slide组件高度
  Slide默认继承容器高度，导致挂载时高度突变。给Slide设置自适应内部元素的高度，避免占据多余空间：

  <Slide
    unmountOnExit
    key={2}
    direction="up"
    in={showLink}
    container={containerRef.current}
    sx={{ height: 'fit-content' }}
  >
    <Button
      sx={{ mt: 1 }}
      variant="contained"
      color="secondary">
      Support now
    </Button>
  </Slide>
  

• 绝对定位脱离文档流
  将Slide设置为绝对定位，动画仅通过transform移动，不影响其他内容布局。需确保容器设置position: relative：

  <Slide
    unmountOnExit
    key={2}
    direction="up"
    in={showLink}
    container={containerRef.current}
    sx={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
  >
    <Button
      sx={{ mt: 1, width: 'fit-content' }}
      variant="contained"
      color="secondary">
      Support now
    </Button>
  </Slide>
  

• 改用transform实现过渡
  MUI Slide默认用top/bottom等布局属性触发动画，易导致重排。自定义过渡属性，使用translateY避免布局偏移：

  <Slide
    unmountOnExit
    key={2}
    direction="up"
    in={showLink}
    container={containerRef.current}
    transition={{ transform: 'transform 300ms ease-in-out' }}
    sx={{ height: 'fit-content' }}
  >
    <Button
      sx={{ mt: 1 }}
      variant="contained"
      color="secondary">
      Support now
    </Button>
  </Slide>
  

内容的提问来源于stack exchange，提问作者Dimitar Nizamov