MUI Drawer过渡异常求助：transitionDuration仅首次生效及自定义过渡需求

问题核心：MUI Drawer的transitionDuration仅首次打开生效，没法实现点击Item1时向左过渡、关闭时执行特定exit动画的需求。

解决方案思路 #

1. 替换默认过渡组件：用自定义的Slide组件替代Drawer默认的过渡组件，动态控制过渡方向和时长。
2. 状态驱动过渡行为：用状态变量记录当前过渡方向，点击Item1时切换方向，关闭抽屉时触发对应动画。
3. 分离进/出过渡时长：在自定义过渡组件里分别设置enter和exit的超时时间，确保关闭时的exit过渡生效。

实现代码示例 #

import React, { useState } from 'react';
import { Drawer, Button, List, ListItem, Slide } from '@mui/material';

const CustomDrawer = () => {
  const [open, setOpen] = useState(false);
  const [transitionDirection, setTransitionDirection] = useState('right');

  // 切换抽屉开关，打开时重置过渡方向为默认右侧
  const toggleDrawer = () => {
    if (!open) {
      setTransitionDirection('right');
    }
    setOpen(!open);
  };

  // 点击Item1时，设置向左过渡并关闭抽屉
  const handleItem1Click = () => {
    setTransitionDirection('left');
    setOpen(false);
  };

  // 自定义过渡组件，控制方向和进/出时长
  const CustomTransition = (props) => {
    return (
      <Slide
        {...props}
        direction={transitionDirection}
        timeout={{
          enter: 500, // 打开时的过渡时长
          exit: 800  // 关闭时的exit过渡时长
        }}
      />
    );
  };

  return (
    <div>
      <Button onClick={toggleDrawer}>打开抽屉</Button>
      <Drawer
        anchor="right"
        open={open}
        onClose={toggleDrawer}
        TransitionComponent={CustomTransition}
      >
        <List>
          <ListItem button onClick={handleItem1Click}>Item 1</ListItem>
          <ListItem button onClick={toggleDrawer}>Item 2</ListItem>
        </List>
      </Drawer>
    </div>
  );
};

export default CustomDrawer;

关键说明 #

• TransitionComponent属性：通过这个属性替换Drawer的默认过渡逻辑，让我们能完全控制过渡的方向、时长和动画类型。
• 动态方向控制：点击Item1时将transitionDirection设为left，此时关闭抽屉会执行向左滑出的动画；下次打开时重置为right，保证正常的右侧滑入效果。
• 分离进/出超时：timeout对象里的enter和exit分别对应打开和关闭的过渡时长，彻底解决原transitionDuration仅首次生效的问题。

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