javascript - How to animate change of grid item size Material UI - Stack Overflow

admin管理员组

文章数量:1341470

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

Share Improve this question Follow asked Sep 8, 2018 at 0:37 carloscccarloscc 79944 gold badges1616 silver badges2121 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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

本文标签： javascriptHow to animate change of grid item size Material UIStack Overflow