动画切换网格大小

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

嗨，这是当天真正有趣的问题，我试图在悬停时实现简单的过渡。你可以在codesandbox上看到：

Animate Switching Grid Size

PS我已经添加了您的过渡属性作为注释而没有给出宽度它工作得很好。您可以在Material-UI报告问题，这是正确的时间。

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