Как анимировать изменение размера элемента сетки Material UI

Question

У меня есть проект с пользовательским интерфейсом React и Material.

Мне нужно несколько советов о том, как анимировать изменение размера элемента сетки. Элемент по умолчанию sm = {3}, когда пользователь наводит курсор на элемент, он меняется на sm = {6}. Это делается с помощью четных триггеров и переменной состояния. У меня вопрос, как я могу создать переход / анимацию для этого?

Я пытался добавить это к элементу CSS, но это не сработало.

transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.easeIn,
    duration: theme.transitions.duration.sta
})

Answer 1

Я знаю, что этому вопросу уже три месяца, но у меня была та же проблема с анимацией изменения размера сетки в интерфейсе React и Material на основе переменной в состоянии. Я делал переход к содержанию главной страницы, чтобы плавно изменять размеры, когда боковая панель расширяется и убирается. Я сделал это с помощью встроенного стиля элементов Grid.

Мой код:

<Grid container>
  <Grid 
    item xs={this.state.expandMainContent === true ? 1 : 2}
    style={{transition: theme.transitions.create("all", {
          easing: theme.transitions.easing.sharp, 
          duration: theme.transitions.duration.leavingScreen,
  })}} >
    <Sidebar />
  </Grid>
  <Grid 
    item xs={this.state.expandMainContent === true ? 11 : 10} 
    style={{transition: theme.transitions.create("all", {
          easing: theme.transitions.easing.sharp, 
          duration: theme.transitions.duration.leavingScreen
   })}}>
     <MainContent />
  </Grid>
</Grid>

Я сделал мой при клике, тогда как ваш при наведении, но он все равно должен работать.

Answer 2

Вы должны оживить и облегчить переход к работе, попробуй с css

.item {
   transition: all .5s ease-in-out;
}
.item:hover {
   transition: all .5s ease-in-out;
}