如何為網格項目大小的材質動畫更改動畫

Question

我有一個帶有React和Material UI的項目。

我需要一些有關如何為網格項目大小更改動畫的指導。 默認情況下，該項目為sm = {3}，當用戶將其懸停時，該項目將更改為sm = {6}。 這是通過偶數觸發器和狀態變量完成的。 我的問題是如何為此創建轉場/動畫？

我嘗試將其添加到項目CSS中，但是沒有用。

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

Answer 1

您應該為輕松過渡和過渡過渡設置動畫，請嘗試使用CSS

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

Answer 2

我知道這個問題已經三個月了，但是我有同樣的問題，即根據狀態中的變量來為React和Material UI中的網格大小變化設置動畫。 我正在做一個過渡，以便在側邊欄展開和縮回時可以平滑地調整主頁的大小。 我在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>

我的確是在點擊時獲得的，而您的鼠標卻在懸停時，但它仍然可以正常工作。