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>

我确实是在点击时挖了我的，而您的鼠标却在悬停中，但是它仍然可以正常工作。

如何为网格项目大小的材质动画更改动画

2 个答案: