如何提高素材用户界面的整体动画速度
如何提高素材用户界面的整体动画速度
提问于 2019-07-14 07:33:05
如何提高Material UI的整体动画速度，例如，在material UI中有一个drawer组件，它可以打开或关闭，如何提高动画速度？
更好的是，如何提高material UI中的所有动画速度？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-14 14:17:17
局部覆盖
您可以通过向组件中添加<Drawer>支柱来更改transitionDuration的转换时间。
<Drawer transitionDuration={1000}> // time for entering and leaving in ms如果您想要进入和离开的不同时间，那么：
<Drawer transitionDuration={{ enter: 500, exit: 1000 }}>现场演示：
全局覆盖(MUI 5)
至于全球覆盖。您可以使用<ThemeProvider>和createTheme将自定义主题注入应用程序。然后您可以覆盖许多内容，其中之一是动画持续时间：
import { ThemeProvider, createTheme } from '@mui/material/styles';
const theme = createTheme({
transitions: {
duration: {
enteringScreen: 2000,
leavingScreen: 100,
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<RestOfYourApp />
</ThemeProvider>
);
}现场演示
全局覆盖(资料-UI <= 4.x)
不幸的是，它不工作在材料-UI版本4(和更高版本)。
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
const theme = createMuiTheme({
transitions: {
duration: {
enteringScreen: 2000,
leavingScreen: 100,
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<RestOfYourApp />
</MuiThemeProvider>
);
}
起作用了..。对于某些组件，例如<Button>。但其他(如<Drawer>)具有转换属性硬编码的源代码。
因此，改变材料-UI 4中<Drawer>转换时间的唯一方法是在组件中添加transitionDuration支柱.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57025427
复制相关文章
相似问题
腾讯云开发者
