0

我有一个带有 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
    })
},

我认为这应该对其进行动画处理。但是，转换没有做任何事情。

4

1 回答 1

0

嗨，这真是一个有趣的问题，我尝试在悬停时使用简单的转换来实现。您可以在代码和框上看到：

动画切换网格大小

PS我已将您的过渡属性添加为注释，但没有给出宽度它效果很好。Material-UI您可以在正确的时间报告问题。

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

于 2018-09-08T20:15:24.910 回答