How to animate change of grid item size Material UI

user_1995049 0
Viewed 8476

I have a project with React and Material UI.

I need some guidance on how to animate a grid item size change. The item is by default sm={3}, when the user hovers the item, this changes to sm={6}. This is done with even triggers and a state variable. My question is how can I create a transition/animation for this?

I tried adding this to the item css but it didn't work.

transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.easeIn,
    duration: theme.transitions.duration.sta
})
material-ui next.js reactjs css javascript
2 Answers

I know this question is three months old but I had the same problem of animating a grid size change in React and Material UI based on a variable in the state. I was doing a transition for the main page content to smoothly resize when a sidebar expanded and retracted. I did it with inline styling on the Grid elements.

My code:

<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>

I did mine on click whereas your's is on hover but it should still work the same.

user_106524310

You should animate both ease in and ease out for transition to work, try with css 

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