I'm currently working on a project using React and Material UI.
Seeking assistance on how to implement an animation for changing the size of a grid item. By default, the item is set to sm={3}, but when a user hovers over it, I want it to change to sm={6}.
Below is the code snippet:
<Grid
item
xs={this.state.hoverItem ? 6 : 3}
spacing={24}
onMouseEnter={this.handleItemHover}
onMouseLeave={this.handleItemHoverLeave}
>
<Paper
elevation={this.state.hoverItem ? 5 : 1}
className={classNames(
classes.card,
this.state.hoverItem && classes.cardHover
)}
>
</Paper>
</Grid>
Additionally, here is my JSS implementation:
card: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
cardHover: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
Despite implementing these transitions, they don't seem to be functioning as expected.