css - 动画切换网格大小

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 我已经添加了您的过渡属性作为评论，但没有给出 width 它工作得很好。您可以在 Material-UI 上报告问题这是正确的时间。

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