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

Posted 2023-02-22

【中文标题】修复 Material-UI 右侧持久抽屉动画

【英文标题】：Fix Material-UI Right Side Persistent Drawer Animation

【发布时间】：2019-01-04 23:12:06

【问题描述】：

我有一个相当复杂的应用程序，其中包含多个抽屉。我遇到了右侧抽屉动画的问题。抽屉本身的动画效果很好，但父 div 没有。我尝试将抽屉的相同动画应用于父 div，但这并没有解决我的问题。我已经在 CodeSandbox 中复制了这个问题。见下文。

Example

【问题讨论】：

链接失效

嗯，谢谢你告诉我。尝试这个。 codesandbox.io/embed/w36rxmvp8

你到底是什么意思？动画中的黑色背景？

是的。在我们的应用程序中，Canvas 是一个 2d/3d 工作区，当抽屉动画进入时，父 div 会对齐到全角。我目前的解决方法是使父 div 的背景颜色与 Canvas 的背景颜色相同。

@RicardoCosta 是什么意思？我的示例中的动画使用默认的 MUI CSS 动画。

【参考方案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; 
>

【参考方案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）