Mui persistent变体Drawer无过渡动画 如何设置缓慢滑入滑出效果

失效核心原因 #

你之前传入transitionDuration="1000ms"不生效，是因为MUI Drawer的transitionDuration属性不接收带单位的字符串值，仅支持两种合法格式：

• 数字类型：单位固定为毫秒，比如1000就代表1秒过渡时长
• 对象类型：分别配置进入、退出动画的时长，格式为{ enter: 进入时长(ms), exit: 退出时长(ms) }

传带ms后缀的字符串时组件无法正确解析，会直接使用默认的短过渡配置，看起来就和瞬时完成没有区别。

可直接落地的修复方式 #

1. 修正transitionDuration属性格式 #

直接修改你传入的drawerProps配置即可，不需要额外写自定义CSS：

const drawerProps = {
  className: "staff-drawer",
  open,
  onClose,
  // 统一设置进出场时长为1秒
  transitionDuration: 1000,
  // 如果需要差异化配置进出场速度，用下面的对象写法替换上面的数值即可
  // transitionDuration: {
  //   enter: 800, // 滑入时长800ms
  //   exit: 500  // 滑出时长500ms
  // }
};

组件调用代码不需要改动，保持原有写法即可：

<Drawer variant="persistent" {...drawerProps}>
  {/* 抽屉内容 */}
</Drawer>

2. 自定义样式冲突排查 #

如果按上面改完还是没有过渡效果，检查你自定义的staff-drawer类相关CSS规则：

• 不要给.staff-drawer或者.staff-drawer .MuiDrawer-paper节点设置transition: none，会直接禁用所有过渡效果
• 不要硬编码覆盖整个transition属性，如果要调整缓动效果，只修改transition-timing-function即可，避免覆盖组件内置的transform过渡规则：

.staff-drawer.MuiDrawer-paper {
  /* 自定义缓动函数，不要重写整个transition属性 */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

• persistent变体的过渡是基于transform位移动画实现的，不要额外给抽屉加left、margin-left这类属性的过渡，会和内置动画冲突导致卡顿、失效。

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