gpt4 book ai didi

javascript - 如何为网格元素大小 Material UI 的变化设置动画

转载 作者:行者123 更新时间:2023-11-30 20:12:44 26 4
gpt4 key购买 nike

我有一个使用 React 和 Material UI 的元素。

我需要一些关于如何动画化网格元素大小变化的指导。该元素默认为 sm={3},当用户将鼠标悬停在该元素上时,这将更改为 sm={6}。这是通过偶数触发器和状态变量完成的。我的问题是如何为此创建过渡/动画?

我尝试将此添加到元素 css,但没有成功。

transition: theme.transitions.create("width", {
easing: theme.transitions.easing.easeIn,
duration: theme.transitions.duration.sta
})

最佳答案

我知道这个问题已经三个月了,但我遇到了同样的问题,即根据状态中的变量在 React 和 Material UI 中动画化网格大小的变化。当侧边栏展开和缩回时,我正在对主页内容进行过渡以平滑地调整大小。我在 Grid 元素上使用内联样式来完成它。

我的代码:

<Grid container>
<Grid
item xs={this.state.expandMainContent === true ? 1 : 2}
style={{transition: theme.transitions.create("all", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
})}} >
<Sidebar />
</Grid>
<Grid
item xs={this.state.expandMainContent === true ? 11 : 10}
style={{transition: theme.transitions.create("all", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})}}>
<MainContent />
</Grid>
</Grid>

我的是点击,而你的是悬停,但它应该仍然有效。

关于javascript - 如何为网格元素大小 Material UI 的变化设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52231051/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com