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

Question

我有一个相当复杂的应用程序与多个抽屉.我的右侧抽屉动画有问题.抽屉本身的动画效果很好,但父母不会.我尝试将抽屉的相同动画应用于父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; }}
>