Анимированное изменение размера сетки с помощью Material UI React - PullRequest
Новая
       15

Анимированное изменение размера сетки с помощью Material UI React

2 голосов
/ 17 февраля 2020

Я играю с Material UI (тема Creative Tim) и застрял в этом ... У меня есть <Grid> с двумя <GridItem> внутри. Один из (левый) является «основным», тогда как правый появляется иногда. У меня вопрос, как оживить появляющихся правильных?

Пока у меня есть это: 

<Grid>
 <GridItem
   md={isViewDetailsMode ? 7 : 10}
   className={classes.collapsible}>
    {...}
  </GridItem>
  <GridItem 
   md={4} 
   className={isVisible ? classes.visible : classes.hidden}>
    {...}
  </GridItem>
</Grid>

classes.collapsible: {transitionDuration: "0.3s"}
classes.visible: {transitionDuration: "0.3s"}
classes.hidden: {display: "none"}

Это вроде работает, но когда левый сжимается, правый один появляется под левым, и после завершения перехода он занимает свое место справа.

Есть предложения? Здесь - это CodeSandBox. Спасибо.

...