javascript - 如何动画更改网格项目大小 Material UI
问题描述
我有一个带有 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>
我在点击时完成了我的点击,而你的在悬停时,但它应该仍然可以正常工作。
推荐阅读
- ethereum - 保存地址
- sed - Linux sed 搜索带有反斜杠的行
- ruby-on-rails - 尝试用 jest 测试反应组件时无法编译 js.erb 导入的模块
- dns - 我收到“type master”错误;在我的 named.conf 文件中
- here-api - 这里 Maps cors 问题 - 只有本地资源(没有外部资源)
- java - Android 11 运行时存储权限
- python - 为什么存储“for循环”的结果不起作用?
- c++ - 您可以在 C++ 中动态分配带有向量作为字段的类吗?
- google-cloud-platform - Google Cloud 如何对默认服务帐号进行身份验证?
- c++ - 如何在一串字符中找到一个单词,其中字符可能由空格分隔