MUI Drawer组件挂载指定div时动画异常问题求助

嘿，我刚好碰到过类似的问题！你这个动画异常的根源是手动设置了太多不必要的position: absolute，加上容器的定位上下文没处理对，直接把动画的作用对象搞反了😅

我给你整理了几个关键的修复步骤：

• 立刻移除slotProps里backdrop的position: absolute样式，MUI的Drawer backdrop默认会基于目标容器自动定位，手动设置绝对定位会打破这个逻辑
• 删除ModalProps里的style: { position: "absolute" }配置，这个设置会让整个Modal容器的定位彻底跑偏，导致动画被错误地应用到了背景页面上
• 给你的mainDiv加上position: relative样式，Modal需要基于一个有定位上下文的父元素来渲染，否则会向上查找直到body，这也是动画异常的核心诱因之一

下面是修改后的完整代码示例：

<div className={"mainDiv"} style={{ position: "relative" }}> 
  {/* 其他嵌套div */}
  <div className="subDiv">
    {/* 一些内容 */}
    <Drawer
      anchor={"right"}
      open={openDrawer}
      variant="temporary"
      transitionDuration={600}
      slotProps={{
        paper: {
          style: {
            width: "50%",
            height: "100vh",
          },
        },
      }}
      ModalProps={{
        container: document.getElementById("mainDiv"),
      }}
    >
      {/* drawer内容 */}
      {/* 关闭drawer的按钮 */}
    </Drawer>
  </div>
  {/* 其他嵌套div */}
</div>

这样调整之后，Drawer的滑入动画就会正确作用在自身的面板上，背景页面会保持静止，完全符合你预期的效果。另外提醒下，MUI的Drawer组件已经封装了完善的容器适配和动画逻辑，除非特殊需求，尽量不要手动修改它的核心定位样式，很容易踩这类动画跑偏的坑~

内容来源于stack exchange