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


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

最佳答案

嗨,这确实是当今一个有趣的问题,我尝试通过悬停时的简单转换来实现。您可以在codeandbox上看到:

Animate Switching Grid Size

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

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

关于css - 动画切换网格大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52238460/

10-12 12:25
查看更多