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

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

• javascript
• css
• reactjs
• material-ui
• next.js

• please share codesandbox for it – Sakhi Mansoor Commented Sep 8, 2018 at 8:09

2 Answers 2

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.

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