如何动画更改网格项目大小 Material UI

Question

我有一个 React 项目和 Material UI。

我需要一些关于如何动画化网格项目大小变化的指导。该项目默认为 sm={3}，当用户将鼠标悬停在该项目上时，这将更改为 sm={6}。这是通过偶数触发器和状态变量完成的。我的问题是如何为此创建 transition/animation？

我尝试将此添加到项目 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>

我的是点击，而你的是悬停，但它应该仍然有效。

如何动画更改网格项目大小 Material UI

How to animate change of grid item size Material UI

javascript

css

reactjs

material-ui

next.js