Question

我有一个带有React和Material UI的项目。

我需要一些有关如何为网格项目大小更改动画的指导。默认情况下，该项目为sm = {3}，当用户将其悬停时，该项目将更改为sm = {6}。

这是我的代码：

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

这就是我执行JSS的方式：

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

我认为这应该使其动画。但是，过渡没有做任何事情。

Answer 1

嗨，这确实是当今有趣的问题，我尝试在悬停时进行简单的过渡来实现。您可以在codeandbox上看到它：

Animate Switching Grid Size

PS我已经将您的过渡属性添加为注释，但没有给出 width 。效果很好。您可以在适当的时候在Material-UI上报告问题。

如果问题仍然存在，请告诉我。

动画切换网格大小

1 个答案: