Fix Material-UI Right Side Persistent Drawer Animation

У меня довольно сложное приложение с несколькими ящиками. У меня проблема с анимацией правого бокового ящика. Сами ящики анимируются нормально, а родительские элементы - нет. Я попытался применить ту же анимацию для ящика к родительскому div, и это не решило мою проблему. Я воспроизвел проблему в CodeSandbox. Смотри ниже.

Пример


reactjs material-ui css jss
person Seth Duncan    schedule 27.07.2018    source источник
comment
Ссылка не работает   -  person john c. j.    schedule 27.07.2018
comment
Хм, спасибо, что сообщили мне. Попробуй это. codesandbox.io/embed/w36rxmvp8   -  person Seth Duncan    schedule 27.07.2018
comment
Какую именно проблему вы имели в виду? Черный фон во время анимации?   -  person john c. j.    schedule 27.07.2018
comment
Ага. В нашем приложении Canvas представляет собой рабочее пространство 2d/3d, а родительский элемент div привязывается к полной ширине, в то время как ящик анимируется. Мой текущий обходной путь — сделать цвет фона родительского элемента div таким же, как цвет фона холста.   -  person Seth Duncan    schedule 27.07.2018
comment
Что ты имеешь в виду @RicardoCosta? Анимация в моем примере использует анимацию MUI CSS по умолчанию.   -  person Seth Duncan    schedule 04.09.2018

Ответы (2)


arrow_upward
3
arrow_downward

Наш конкретный вариант использования довольно сложен, но я думаю, что нам удалось найти решение. По сути, нам нужно было применить переход к элементу <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; }}
>
person Seth Duncan    schedule 26.10.2018

arrow_upward
0
arrow_downward

Кроме того, если вам не нужно фиксированное значение маржи, вы можете использовать процент для управления маржей, например:

// 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)

person DamonWu    schedule 19.07.2021