Question

我有一个带有多个抽屉的相当复杂的应用程序。右侧抽屉动画出现问题。抽屉本身动画良好，但父级div则没有。我尝试将相同的动画应用于抽屉的父div，但这不能解决我的问题。我已经在CodeSandbox中复制了该问题。见下文。

Answer 1

我们的特定用例相当复杂，但是我认为我们已经找到了解决方法。本质上，我们必须对<main>元素应用过渡，并根据右侧工具栏的状态设置其边距。见下文。

main: {
    position: 'relative',
    flex: 1,
    height: '100%',
    overflow: 'hidden',
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginRight: -500,
  },
  mainRightOpen: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginRight: 0,
  }

并像这样实现...

<main
  className={`${classes.main}
    ${this.props.rightToolBarOpen ? classes.mainRightOpen : null}
   `}
  ref={(mainContent) => { this.mainContent = mainContent; }}
>

Answer 2

另外，如果你不想要固定的边距值，你可以考虑使用百分比来控制边距，例如：

// define the drawerWidth

const drawerWidth = 33.33333;

// put margin value as a string format like below: 

content: {
  flexGrow: 1,
  padding: theme.spacing(6),
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginRight: `${-drawerWidth}%`,
},
contentShift: {
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.easeOut,
    duration: theme.transitions.duration.enteringScreen,
  }),
  marginRight: 0,
},

以上解决方案适用于我（我正在使用的 Material-UI 版本：v4.12.1）

修复Material-UI右侧永久抽屉动画

2 个答案: