如何提高 Material UI 的整体动画速度

Question

我怎样才能提高整体动画速度Material UI，例如里面有一个drawer组件material UI，它可以打开或关闭，我怎样才能提高动画速度？
更好的是我怎样才能提高所有动画速度material UI？

Answer 1

本地覆盖

您可以<Drawer>通过向transitionDuration组件添加道具来更改过渡持续时间。

<Drawer transitionDuration={1000}>  // time for entering and leaving in ms

如果您想要不同的进出时间：

<Drawer transitionDuration={{ enter: 500, exit: 1000 }}>

文档

现场演示：

全局覆盖

至于全局覆盖。通过使用<ThemeProvider>组件并将您的自定义主题注入应用程序应该是可能的。然后你可以覆盖很多东西，其中之一是动画持续时间：

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  // here are default values in ms
  transitions: {
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195,
    }
  }
}); 

function App() {
    return (
        <MuiThemeProvider theme={theme}>
            <RestOfYourApp />
        </MuiThemeProvider>
    );
}

它有效......例如对于<Button>组件：

尝试将鼠标悬停在上面示例中的按钮上，完成转换需要 1000 毫秒。但不幸的是它不适用于<Drawer>组件。

从 enterScreen 和 leaveScreen 主题属性开始应该需要持续时间，但看起来这些属性是在源代码中硬编码的。

因此，更改<Drawer>过渡持续时间的唯一方法是向transitionDuration组件添加道具。